{"id":948,"date":"2019-06-13T00:10:19","date_gmt":"2019-06-12T15:10:19","guid":{"rendered":"https:\/\/ito-u-oti.com\/?p=948"},"modified":"2020-07-10T17:30:44","modified_gmt":"2020-07-10T08:30:44","slug":"post-948","status":"publish","type":"post","link":"https:\/\/ito-u-oti.com\/?p=948","title":{"rendered":"\u3010RequireJS\u3011\u3010BackboneJS\u3011requireJS\u304b\u3089backboneJS\u3092\u4f7f\u3046\uff08View\uff09"},"content":{"rendered":"\n

AngularJS\u3001ReactJS\u3001VueJS\u304c\u3042\u308b\u3053\u306e\u3054\u6642\u4e16\u306b\u4eca\u66f4BackboneJS\u304b\u3088\u30fb\u30fb\u30fb\u3002\u3068\u601d\u3046\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u307e\u3060\u307e\u3060\u30b7\u30b9\u30c6\u30e0\u3067\u4f7f\u308f\u308c\u3066\u3044\u308b\u306e\u3067\u52c9\u5f37\u3059\u308b\u306e\u307f\u306a\u306e\u3067\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\uff08jquery\u3001underscore\uff09\u3092\u8aad\u307f\u8fbc\u307f\u3001View\u3092\u4f5c\u3063\u3066index.html\u306b\u300cHelloWorld\u300d\u3092\u8868\u793a\u3055\u305b\u308b\u3002<\/p>\n\n\n\n

\u30b7\u30f3\u30d7\u30eb\u306a\u8a2d\u8a08\u3067\u3059\u3002
View\u306b\u3064\u3044\u3066\u4f55\u30d1\u30bf\u30fc\u30f3\u304b\u3084\u308a\u307e\u3059\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\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        <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
HelloWorldView.js<\/h3>\n\n\n
\nrequire(['backbone'], function(backbone) {\n    \/\/index.html\u4e0a\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u5185\u306b\u633f\u5165\u3059\u308b\n    var HelloWorldView = backbone.View.extend({\n        el: $('.hoge'),\n    })\n    var helloWorldView = new HelloWorldView();\n    $(helloWorldView.el).html('<h2>Hello world Backbone!!<\/h2>');\n});\n<\/pre><\/div>\n\n\n
\u8868\u793a<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
hoge\u3068\u3044\u3046\u540d\u524d\u304c\u3064\u3044\u305fdiv\u30bf\u30b0\u306bBackbone\u306eView\u304b\u3089\u6587\u5b57\u304c\u633f\u5165\u3055\u308c\u305f\u306e\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
View\u3067\u65b0\u305f\u306bElement\u3092\u633f\u5165\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        <h1>Hello World!<\/h1>\n        <div class="hoge"><\/div>\n    <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
HelloWorld.js<\/h3>\n\n\n
\nrequire(['backbone'], function(backbone) {\n    \/\/index.html\u4e0a\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u306b\u65b0\u305f\u306b\u30bf\u30b0\u3092\u57cb\u3081\u8fbc\u3080\n    var HelloWorldView = backbone.View.extend({\n        tagName:"div",\n        className:"puge"\n    })\n\n    var helloWorldView = new HelloWorldView();\n    $('.hoge').append(helloWorldView.el);\n    $('.puge').html('<h2>Hello world Backbone!!<\/h2>');\n});\n<\/pre><\/div>\n\n\n
\u8868\u793a<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
puge\u3068\u3044\u3046\u540d\u524d\u306ediv\u30bf\u30b0\u3054\u3068html\u306b\u633f\u5165\u3055\u308c\u305f\u306e\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
initialize\u3092\u4f7f\u7528\u3057\u3066\u63cf\u753b\u51e6\u7406\u3092\u5206\u5272\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        <h1>Hello World!<\/h1>\n        <div class="hoge"><\/div>\n    <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
HelloWorldView.js<\/h3>\n\n\n
\nrequire(['backbone'], function(backbone) {\n    \/\/view\u3068\u3057\u3066\u9069\u5207\u306a\u5206\u89e3\u3092\u3059\u308b\n\n    var HelloWorldView = backbone.View.extend({\n        el: $('.hoge'),\n        initialize: function() {\n            this.render();\n        },\n        render: function() {\n            $(this.el).html('<h2>Hello world Backbone!!<\/h2>');\n        }\n    });\n    new HelloWorldView();\n});\n\n<\/pre><\/div>\n\n\n
\u8868\u793a<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
initialize\u95a2\u6570\u306fbackbone\u306e\u521d\u671f\u51e6\u7406\u3092\u62c5\u5f53\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
template\u3092\u4f7f\u7528\u3057\u3066View\u3067\u63cf\u753b\u3059\u308b<\/h2>\n\n\n\n
underscore.js\u306b\u306ftemplate\u304c\u5b9a\u7fa9\u3067\u304d\u308b\u6a5f\u80fd\u304c\u3042\u308a\u3001view\u3067template\u3092\u547c\u3073\u51fa\u3057\u3066\u753b\u9762\u306b\u63cf\u753b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\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
html\u4e0a\u306b\u5916\u90e8\u5b9a\u7fa9\u3068\u3057\u3066template\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002
\u8a2d\u5b9a\u3059\u308b\u6642\u306ftype\u3092text\/template\u3068\u3057\u3001template\u3092\u8b58\u5225\u3067\u304d\u308b\u3088\u3046\u306bid\u3092\u4ed8\u3051\u3066\u304a\u304d\u307e\u3059\u3002
\u300c= text =\u300d\u3067\u56f2\u307e\u308c\u305f\u4e2d\u306bView\u5074\u304b\u3089\u6587\u5b57\u3092\u633f\u5165\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
HelloWorld.js<\/h3>\n\n\n
\nrequire(['backbone'], function(backbone) {\n    \/\/view\u3068\u3057\u3066\u9069\u5207\u306a\u5206\u89e3\u3092\u3057\u3001\u5916\u90e8\u5b9a\u7fa9\u3055\u308c\u305ftemplate\u3092\u547c\u3073\u51fa\u3059\u3002\n\n    var HelloWorldView = backbone.View.extend({\n        el: $('.hoge'),\n        initialize: function() {\n            this.render();\n        },\n        render: function() {\n            var template = $('#hello-template').text();\n            var compiled = _.template(template);\n            var text = { "text": "Hello World Backbone!!"};\n            $(this.el).html(compiled(text));\n        }\n    });\n    new HelloWorldView();\n});\n\n<\/pre><\/div>\n\n\n
\u8868\u793a<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
View\u3067\u8a2d\u5b9a\u3057\u305f\u6587\u5b57\u304ctemplate\u3092\u901a\u3057\u3066html\u4e0a\u306b\u633f\u5165\u3055\u308c\u3066\u3044\u308b\u306e\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
render\u95a2\u6570\u3067\u884c\u3063\u305ftemplate\u306e\u64cd\u4f5c\u3092\uff11\u884c\u3067\u66f8\u304f\u3068\u3053\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n
\nrequire(['backbone'], function(backbone) {\n    \/\/view\u3068\u3057\u3066\u9069\u5207\u306a\u5206\u89e3\u3092\u3059\u308b\n\n    var HelloWorldView = backbone.View.extend({\n        el: $('.hoge'),\n        initialize: function() {\n            this.render();\n        },\n        render: function() {\n            $(this.el).html(_.template($('#hello-template')\n            .text())({ "text": "Hello World Backbone!!"}));\n        }\n    });\n    new HelloWorldView();\n});\n\n\n<\/pre><\/div>\n\n\n
\u307e\u3068\u3081<\/h2>\n\n\n\n
\u5f8c\u534a\u306fbackbone.js\u306b\u3064\u3044\u3066\u306e\u8a71\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u304c\u3001backbone.js\u3092requireJS\u3092\u4f7f\u3063\u3066\u8aad\u307f\u8fbc\u3080\u6642\u306e\u65b9\u6cd5\u3067\u3057\u305f\u3002<\/p>\n\n\n\n
\u53c2\u8003<\/h2>\n\n\n\n
\uff3bUnderscore.js\uff3d\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304b\u3089\u6587\u5b57\u5217\u3092\u751f\u6210\u3059\u308b<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
AngularJS\u3001ReactJS\u3001VueJS\u304c\u3042\u308b\u3053\u306e\u3054\u6642\u4e16\u306b\u4eca\u66f4BackboneJS\u304b\u3088\u30fb\u30fb\u30fb\u3002 […]<\/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,213,222,223,221],"class_list":["post-948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-backbonejs","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