码迷,mamicode.com
首页 > 其他好文 > 详细

Backbone学习记录(3)

时间:2014-08-23 17:38:01      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   strong   ar   2014   

创建视图

同前面创建模型和集合的方式一样,Backbone.View.extend()即可创建视图

var UserView=Backbone.View.extend();
var view1=new UserView();

bubuko.com,布布扣
生成的实例是这样一个对象,el应该是js原生的对象,$el应该是jQuery对象,很方便,不需要我再去$(el)。
验证一下:

view1.el.innerText="111";
//"111"

view1.$el
//[<div>?111?</div>?]
view1.$el.data(‘ck‘,1)
//[<div>?111?</div>?]

可以看到生成的对象,默认标签是div。
我们可以自己指定这些:比如className id tagName

var view2=new UserView(
 {
   ‘tagName‘:‘i‘,
   ‘className‘:‘next‘,
   ‘id‘:‘slide_btn‘
 }
);

bubuko.com,布布扣

如果想要将视图绑定到页面已存在的元素中

var UserView=Backbone.View.extend();
var view3=new UserView({
   el:$(‘.d1‘)
 });

view3.el
//<div class="d1">这里</div>

bubuko.com,布布扣

上面都是在实例化的时候传参,也可以在extend时传参:

var UserView=Backbone.View.extend({‘id‘:‘search‘,‘className‘:‘btn btn_search‘,‘tagName‘:‘a‘});
var view5=new UserView();

bubuko.com,布布扣



渲染视图

var ListView = Backbone.View.extend({  
    tagName : ‘input‘,  
    className : ‘btn‘,  
    id : ‘search‘,  
    attributes : {  
        type : ‘submit‘,
        value:‘‘
    },  
    render : function() {  
        this.el.value = ‘搜索‘;  
        document.body.appendChild(this.el);  
    }  
});  
var listview = new ListView();  
listview.render();  

生成的DOM元素如下:
<input type="submit" value="搜索" id="search" class="btn">
bubuko.com,布布扣

前端模板,先略过~~~

Backbone学习记录(3)

标签:style   blog   http   color   os   io   strong   ar   2014   

原文地址:http://www.cnblogs.com/qianlegeqian/p/3931496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!