首页 > 其他 > 详细

Backbone学习记录(3)

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

创建视图

同前面创建模型和集合的方式一样,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)

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!