{"id":969,"date":"2019-06-15T21:43:27","date_gmt":"2019-06-15T12:43:27","guid":{"rendered":"https:\/\/ito-u-oti.com\/?p=969"},"modified":"2019-06-15T21:49:55","modified_gmt":"2019-06-15T12:49:55","slug":"post-969","status":"publish","type":"post","link":"https:\/\/ito-u-oti.com\/?p=969","title":{"rendered":"\u3010RequireJS\u3011\u3010BackboneJS\u3011requireJS\u304b\u3089backboneJS\u3092\u4f7f\u3046\uff08View+Model\uff09"},"content":{"rendered":"\n

\u524d\u56de\u304b\u3089\u306e\u7d9a\u304d\u3067\u3059\u3002
\u3010RequireJS\u3011\u3010BackboneJS\u3011requireJS\u304b\u3089backboneJS\u3092\u4f7f\u3046\uff08View\uff09<\/a>
\u4eca\u56de\u306fBackboneJS\u306eView\u304b\u3089Model\u3092RequireJS\u3067\u8aad\u307f\u8fbc\u3093\u3067\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u524d\u63d0<\/h2>\n\n\n\n

\u6982\u8981<\/h3>\n\n\n\n

requireJS\u3092\u4f7f\u7528\u3057\u3066BackboneJS\u3068\u305d\u306e\u4f9d\u5b58\u30d5\u30a1\u30a4\u30eb(jquery\u3001underscore\uff09\u3001Model\u3092\u8aad\u307f\u8fbc\u307f\u3001View\u3092\u4f5c\u3063\u3066index.html\u306bModel\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u8868\u793a\u3055\u305b\u308b\u3002<\/p>\n\n\n\n

\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

requireJS\u3067backboneJS\u3068\u3001Model\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n
\n<!DOCTYPE html>\n<html lang="ja">\n    <head>\n        <meta charset="utf-8">\n        <title><\/title>\n    <\/head>\n    <body>\n        <script src="https:\/\/requirejs.org\/docs\/release\/2.3.6\/minified\/require.js"><\/script>\n        <script src=".\/js\/config\/config.js"><\/script>\n        <script src=".\/js\/views\/HelloWorldView.js"><\/script>\n        <script type="text\/template" id="hello-template">\n            <h2><%= text %><\/h2>\n        <\/script>\n        <h1>Hello World!<\/h1>\n        <div class="hoge"><\/div>\n    <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
config.js<\/h3>\n\n\n
\nrequire.config({\n    baseUrl: "js",\n    paths: {\n        "backbone" : "lib\/backbone",\n        "jquery" : "lib\/jquery",\n        "underscore" : "lib\/underscore"\n    },\n    shim: {\n        'backbone' : {\n            deps: ['underscore', 'jquery'],\n            exports: 'Backbone'\n        }\n    }\n});\n<\/pre><\/div>\n\n\n
backboneJS\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
HelloWorldModel.js<\/h3>\n\n\n
\ndefine(['backbone'], function(backbone) {\n\n    var HelloWorldModel = backbone.Model.extend({\n        defaults: {\n            "text":"Hello World Backbone!!"\n        }\n    });\n\n    return HelloWorldModel;\n});\n<\/pre><\/div>\n\n\n
backboneJS\u306eModel\u3068\u3057\u3066\u4f5c\u6210\u3057\u3066\u3044\u307e\u3059\u3002
text\u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u4e2d\u306b\u300cHello World Backbone!\u300d\u3068\u3044\u3046\u6587\u7ae0\u304c\u683c\u7d0d\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
HelloWorldView.js<\/h3>\n\n\n
\nrequire(['backbone', 'model\/HelloWorldModel'], function(backbone, helloWorldModel) {\n    \/\/view\u3068\u3057\u3066\u9069\u5207\u306a\u5206\u89e3\u3092\u3059\u308b\n\n    var model = new helloWorldModel();\n    \n    var HelloWorldView = backbone.View.extend({\n        el: $('.hoge'),\n        initialize: function() {\n            this.render();\n        },\n        render: function() {\n            var text = model.get("text");\n            $(this.el).html(_.template($('#hello-template').text())({ "text": text}));\n        }\n    });\n    new HelloWorldView();\n});\n<\/pre><\/div>\n\n\n
require\u306b\u6ce8\u76ee\u3057\u3066\u4e0b\u3055\u3044\u3002
\u307e\u305a\u3001backboneJS\u306e\u6a5f\u80fd\u3092\u4f7f\u7528\u3059\u308b\u306e\u3067config\u3067\u8a2d\u5b9a\u3057\u305fbackbone\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002
\u307e\u305f\u3001model\u3092\u4f7f\u7528\u3059\u308b\u306e\u3067\u76f8\u5bfe\u30d1\u30b9\u3067HelloWorldModel\u3092\u6307\u5b9a\u3057\u3066\u547c\u3073\u51fa\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
View\u3067\u306f\u307e\u305aModel\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u751f\u6210\u3059\u308b\u3068\u3053\u308d\u304b\u3089\u59cb\u307e\u308a\u307e\u3059\u3002
initialize\u3067\u521d\u671f\u51e6\u7406\u306e\u969b\u306brender\u3092\u547c\u3073\u51fa\u3057\u3001\u305d\u306e\u4e2d\u3067model\u306etext\u30d5\u30a3\u30fc\u30eb\u30c9\u304b\u3089\u5024\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002
\u305d\u3057\u3066\u3001template\u3092\u547c\u3073\u51fa\u3057\u3066hoge\u30af\u30e9\u30b9\u306e\u8981\u7d20\u306e\u4e2d\u306b\u633f\u5165\u3057\u3064\u3064text\u3092template\u306b\u57cb\u3081\u8fbc\u307f\u307e\u3059\u3002<\/p>\n\n\n\n
\u8868\u793a<\/h3>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
\u524d\u56de\u304b\u3089\u306e\u7d9a\u304d\u3067\u3059\u3002\u3010RequireJS\u3011\u3010BackboneJS\u3011requireJS\u304b\u3089backbo […]<\/p>\n","protected":false},"author":1,"featured_media":972,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[211],"tags":[220,224,213,222,223,221],"class_list":["post-969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-backbonejs","tag-model","tag-requirejs","tag-template","tag-underscore","tag-view"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t