创建视图

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

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


生成的实例是这样一个对象,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'
}
);

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

var UserView=Backbone.View.extend();
var view3=new UserView({
el:$('.d1')
}); view3.el
//<div class="d1">这里</div>

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

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

渲染视图

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">

前端模板,先略过~~~

Backbone学习记录(3)的更多相关文章

  1. Backbone学习记录(7)

    事件委托 <form> <input type="text" class="txt"> <input type="but ...

  2. Backbone学习记录(6)

    路由 backbone将路由规则和一个方法名绑定到一起,来控制单页的hash,以及单页的前进后退. var UserRouter = Backbone.Router.extend({ routes: ...

  3. Backbone学习记录(5)

    数据与服务器 var User=Backbone.Model.extend({ defaults:{ name:'susan', age:18 }, url:'/user'//数据提交的路径 }); ...

  4. Backbone学习记录(4)

    事件绑定  on()方法 调用格式:object.on(event, callback, [context])"change" — 当attributes变化时"chan ...

  5. Backbone学习记录(2)

    创建一个集合 1)new Backbone.Collection()方式 var user=new Backbone.Model({'name':'susan'}); var list=new Bac ...

  6. Backbone学习记录(1)

    去年买的<基于MVC的javascript Web富应用开发>,拖到现在还没看完,作者介绍了三个MVC框架,Spine ,backbone和javascriptMVC.1和2在国内的流行度 ...

  7. Backbone 学习笔记

    Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户 ...

  8. Quartz 学习记录1

    原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...

  9. Java 静态内部类与非静态内部类 学习记录.

    目的 为什么会有这篇文章呢,是因为我在学习各种框架的时候发现很多框架都用到了这些内部类的小技巧,虽然我平时写代码的时候基本不用,但是看别人代码的话至少要了解基本知识吧,另外到底内部类应该应用在哪些场合 ...

随机推荐

  1. SEO搜索引擎基础原理

  2. [a,s]=[22,3]

    [a,s]=[22,3] Object.assign() - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScr ...

  3. object equal

    package equals; public class EqualsTest { public static void main(String[] args) { Employee alice1 = ...

  4. mini_magick

    https://github.com/minimagick/minimagick class  https://www.rubydoc.info/github/minimagick/minimagic ...

  5. Mac JDK 多版本共存

    1.    安装各JDK版本,安装后通过Java -version检测是否安装好    2.    打开~/.bash_profile,没有的话创建    vim ~/.bash_profile   ...

  6. !important的用法(IE6 兼容的解决方法)

    我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DO ...

  7. Java虚拟机一览表

    免费和开源的 Java 虚拟机AegisVM (inactive since 2004).Apache Harmony — supports several architectures and sys ...

  8. Python小练习_将数据库中表数据存到redis里

    # ##练习:将xxx数据库中my_user表中数据存到redis里面# 分析: pymysql.json.redis# 1.连接数据库,查到数据库里面所有的数据,游标类型要用pymysql.curs ...

  9. hdu 3746 Cyclic Nacklace(next数组求最小循环节)

    题意:给出一串字符串,可以在字符串的开头的结尾添加字符,求添加最少的字符,使这个字符串是循环的(例如:abcab 在结尾添加1个c变为 abcabc 既可). 思路:求出最小循环节,看总长能不能整除. ...

  10. 获取指定类型如枚举/属性上自定义attribue值

    有时候我们用数字来区分一些类型,如1:中国银行,2:建设银行,3:工商银行,…….这时候我在代码中通常会定义枚举来与定义的一一对应,并在该枚举值上设置特性来表示所代表的含义,这样避免多处写一些数字来标 ...