Backbone.js 使用模板

前面一篇 Backbone.js HelloWorld,应用起步 只是让 Backbone 跑起来,实际的应用中会使用到模板,Model 等,而模板又是进阶的基础。所以这里介绍在 View 中使用模板,以及如何向模板填充值,模板可以用字符串,或是用 <script type="text/template"> 声明的内容。使用 <%= %><%- %> 来声明变量输出的占位符。

Backbone 的模板要用到的是 underscore.js 库, 要深入了解 Unserscore 就看官方的 Underscore.js 的文档,Underscore 的 template 方法的原型如下:

_.template(templateString, [data], [settings])

下面是些完整的例子

一: 使用字符串模板

为突出效果,把 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() 取出其中的内容。完整代码如下:

点击 http://fiddle.jshell.net/Unmi/2q6jJ/ 看执行效果,页面在一秒钟后显示 Hello Backbone!

注意,你不能直接加载页面中声明的其他元素,例如定义的

如果直接用 _template($("#who_template").html() 的话,执行后显示的就是 Hello <%= who %>。也就是说其中的变量值不会被解析,如果你的模板中无需填充值是可以这么做,但还需用 display:none 来隐藏掉它。

点击 http://fiddle.jshell.net/Unmi/4Rnzs/ 看看加载普通页面元素执行的效果。

我们还能直接在自定义 View 中使用 events 属性来定义事件,接下来我们去体验。

参考: What is a view?

类别: Web/JS. 标签: , , . 阅读(5,498). 订阅评论. TrackBack.

Leave a Reply

Be the First to Comment!

avatar
trackback

[…] Unmi 前面一篇 Backbone.js HelloWorld,应用起步 只是让 Backbone […]

wpDiscuz