前面一篇 Backbone.js HelloWorld，应用起步 只是让 Backbone 跑起来，实际的应用中会使用到模板，Model 等，而模板又是进阶的基础。所以这里介绍在 View 中使用模板，以及如何向模板填充值，模板可以用字符串，或是用 <script type="text/template"> 声明的内容。使用 <%= %> 或 <%- %> 来声明变量输出的占位符。
Backbone 的模板要用到的是 underscore.js 库, 要深入了解 Unserscore 就看官方的 Underscore.js 的文档，Underscore 的 template 方法的原型如下：
_.template(templateString, [data], [settings])
下面是些完整的例子
一: 使用字符串模板
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> </head> <body> <div id="container">Loading...</div> </body> </html> <script> var AppView = Backbone.View.extend({ el: '#container', template: _.template("<h3>Hello <%= who %></h3>"), //上行可写成 template: _.template("<h3>Hello <%- who %></h3>", {who: 'World!'}), // :1 initialize: function(options) { this.render(); }, render: function() { this.$el.html(this.template({who: 'World!'})); //前面开启的是 :1 标识的代码，这里就写成 this.$el.html(this.template); } }); setTimeout(function(){ var appView = new AppView(); }, 1000); </script> |
为突出效果，把 new AppView() 放到了 setTimeout() 延迟执行，项目中没必要这么做。
点击 http://fiddle.jshell.net/Unmi/A7MK7/ 看上面代码执行的效果，可以看到 Loading ... 在 1 秒后被替换成了 Hello World!
另外，如果前面声明 View 时没有对 el 赋值，可以在实例化 AppView 时指定 el 属性，像下面那样使用
new AppView({el: $("#container")})
二. 加载模板
可以加载页面中用 <script type="text/template"> 包含的内容作为模板，它本身不会在页面中显示 出来的。下面是用 jQuery 的选择器来定位这个模板声明，html() 取出其中的内容。完整代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> </head> <body> <div id="container">Loading...</div> <script type="text/template" id="who_template"> <h3>Hello <%= who %></h3> </script> </body> </html> <script> var AppView = Backbone.View.extend({ el: '#container', initialize: function(options) { this.render(); }, render: function() { var template = _.template($("#who_template").html()); this.$el.html(template({who: 'Backbone!'})); } }); setTimeout(function(){ var appView = new AppView(); }, 1000); </script> |
点击 http://fiddle.jshell.net/Unmi/2q6jJ/ 看执行效果，页面在一秒钟后显示 Hello Backbone!
注意，你不能直接加载页面中声明的其他元素，例如定义的
|
1 2 3 |
<div id="who_template" style="display:none"> <h3>Hello <%= who %></h3> </div> |
如果直接用 _template($("#who_template").html() 的话，执行后显示的就是 Hello <%= who %>。也就是说其中的变量值不会被解析，如果你的模板中无需填充值是可以这么做，但还需用 display:none 来隐藏掉它。
点击 http://fiddle.jshell.net/Unmi/4Rnzs/ 看看加载普通页面元素执行的效果。
我们还能直接在自定义 View 中使用 events 属性来定义事件，接下来我们去体验。
参考： What is a view?
本文链接 https://yanbin.blog/backbone-js-use-template/, 来自 隔叶黄莺 Yanbin Blog
[版权声明] 
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。
[…] Unmi 前面一篇 Backbone.js HelloWorld，应用起步 只是让 Backbone […]