模板 - template

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

目前我们直接是在 render 方法里面去组织模型内容的结构 .. 如果需要用到模型的很多个属性的话,这里会变得越来越混乱 .. 所以,我们可以使用模板。

这个视频,我们去给视图准备一个模板。JavaScript 模板的功能并不是 Backbone 提供的,你可以使用第三方提供的模板功能,比如 Mustache ,Handlebars ,或者 Underscore 的模板功能。

这里我们使用 Underscore 的模板功能,去给这个 NoteView 视图准备一个模板。

打开 index.html ... 可以在这个页面的任何的地方去定义这个模板 ...

输入一组 script 标签 ... 然后设置一下它的 type 属性 ... 一般可以设置成 text/template,这样浏览器就不会把它当成是 JavaScript 去处理了。 ... 然后在上面,再去定义一个 id ... 这个 id 就是这个模板的名字..

<script type="text/template" id="list-template"> </script>

在这组 script 标签里面,就是模板的具体的形式 ... 因为我们要用的是 Underscroe 的模板功能。所以,可以使用这样的形式来输出模型里的属性的值 ... 小于号百分号,加上一个等于号 ... 空格 ... 然后是属性的名字 ... 结束的地方,再输入一个百分号加上一个大于号 ...

<%= title %>

这小段代码会输出模型里面的 title 这个属性的值 ... 也就是,可以使用它来表示模型里面的 title 属性 ...

在它的周围,可以加上一组 span 标签 ...

在它后面,再加上一组 small 标签 ,在这个标签上,再加上一个 css 类 .. 设置一下它的 class 属性,值是 pull-right ,这个类可以让元素靠右去显示 ... 里面的内容可以是 Note 模型的 created_at 这个属性 ...

使用这种形式,你可以去组织模型里面的内容的展示形式

保存一下 ...

回到 app.js ...

在这个视图里面,去设置一下 template 这个属性 ... 然后用 Underscore 的 template 方法,指定一下要使用的模板 ...

找到页面上的 id 叫是 list-template 的元素 ... 然后得到它里面的内容 ...

template: _.template(jQuery('#list-template').html()),

再去改造一下 render 方法 ... 去掉 html 这个方法里面的这行代码 ... 然后用 this.template,表示当前这个视图的 template 方法 ...

再把模型里面的属性交给这个 template 方法 ... 模型里的属性是在 this.model ,也就是当前这个视图的 model 下面的 attributes 这个属性里面 ...

this.$el.html(this.template(this.model.attributes));

演示

下面再到浏览器上试试 ...

先调用一个视图的 render() 方法 ...

noteView.render()

然后再去访问一下这个视图里的 el 属性 ...

noteView.el

你会看到,这里面的内容,会按照我们在模板里面设置的形式展示出来 ... 标题周围有一组 span 标签 ... 创建的日期的周围有一组 small 标签 .. 上面有一个类,是 pull-right ...

模板 - template《 Backbone 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点