渲染视图 - render

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

视图里面都有一个 render 方法,我们可以使用这个方法去组织一下在模型里面的内容。

先去新建一个模型 ... var note = new Note ... 设置一下它的标题属性 ...

var note = new Note({
title: '西红柿炒鸡蛋的作法'
});

然后再去创建一个 NoteView 这个视图的实例 ... var noteView 等于 new NoteView ... 在创建的时候,可以告诉一下这个视图要用到的模型是哪个 ... 设置一下 model 属性 ... 它的值,就是在上面我们创建的这个 note 对象 ...

var noteView = new NoteView({model: note});

在这个视图里面,我们可以访问到模型里面的属性,比如标题属性,创建日期的属性等等 ...

想利用这些属性,需要在视图里面,再去定义一个 render 方法 ...

render: function() {
this.$el.html(this.model.get('title'));
}

在这个方法里面,可以设置一下在 el 属性里面设置的那个元素里面包含的内容 ... 现在这个元素的标签是 li ... 上面有一个 item 的类,还有一个 data-role 的属性。

在这个 li 元素里面的内容,就是来自 note 模型里面的属性的值 ...

先用一个 this ... 表示当前这个视图 ... 调用它的 $el ,这个 $el 会返回一个用 el 元素的 jQuery 的对象,这样我们就可以继续去使用 jQuery 的其它的方法,去处理这个 el 元素。

比如,去设置一下这个元素里面的内容 ...

关于 jQuery 的使用方法,可以参考宁皓网的《 jQuery 基础教程》

这里,我们用一个 html 方法,去设置一下这个 el 属性的元素里面的内容 ... 用一个 this.model ,表示当前视图对象的模型 ... 这个模型就是在实例化这个视图的时候,传递进来的那个 ...

然后用 get 方法,可以得到模型里面的属性的值 ... 比如我们要得到 note 模型里的 title 属性 ... 输入 title ...

测试

下面,我们可以去试一下 ...

回到浏览器 ...

先去调用一个视图里面的这个 render 方法 ... 让它去组织一下模型里的数据 ...

noteView.render()

然后再访问一下视图里的 el 属性的值 ...

noteView.el

因为我们在视图里面定义了 render 方法,去组织在模型里面的内容 .... 所以,这里你会发现,在 li 元素里面,会包含在 note 模型里面的 title 属性的值 ...

渲染视图 - render《 Backbone 基础 》

统计

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

社会化网络

关于

微信订阅号

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