Backbone 视图对象主要用来渲染数据,监听事件。

Backbone的视图对象可以展示Model数据,也可以把用户编辑的Model数据传递到后台,可以通过监听事件操作视图里的DOM元素

举例:

var PreviewInvoiceItemView=Backbone.View.extend({
el:'#itemList',
template: _.template($('#InvoiceItem').html()),
initialize:function(){
this.template= _.template($('#InvoiceItem').html());
},
events:{
'click .delete':'dele',
'click .pluc':'show'
},
render:function(){
var that=this;
items.each(function(model){
var data={};
data.price=model.get('price');
data.quantity=model.get('quantity');
data.amount=model.calculateAmount();
data.cid=model.cid;
that.$el.append(that.template(data));
});
return this;
},
dele:function(event){
items.remove(items.get($(event.target).attr('cid')));
},
show:function(){
//var s= items.some(function(model){
// return model.get('price')<3;
// });
// this.$('#pluc').html(s.toString()); var ti=items.create({price:100,quantity:200});
}
});
extend "layout"

block 'content',->
div ->'nihao'
div id:'itemList',-> div id:'pluc',-> script id:"InvoiceItem",type:"text/template",style:"display: none",->
div style:'border:1px solid #ddd;height:40px;',->
div style:'float:left;',->"{{price}}"
div style:'float:left;margin-left:20px;',->"{{quantity}}"
div style:'float:left;margin-left:20px;',->"{{amount}}"
button class:'delete',style:'float:left;margin-left:20px;',cid:'{{cid}}',->"删除"
coffeescript -> $ -> new PreviewInvoiceItemView().render()

  

backbone学习笔记:视图(View)的更多相关文章

  1. Backbone学习笔记一Backbone中的MVC

    原文章地址http://bigdots.github.io/2015/12/01/Backbone学习笔记(一)/#more Backbone.js为复杂WEB应用程序提供模型(models).集合( ...

  2. (转)Qt Model/View 学习笔记 (五)——View 类

    Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...

  3. Backbone学习笔记 - View篇

    Backbone是一种Web端的MVC框架,这里纪录学习Model,View和Collection的笔记. 1 View initialize构造函数 Backbone.View 与jQuery库紧密 ...

  4. Asp.net MVC4高级编程学习笔记-视图学习第一课20171009

    首先解释下:本文只是对Asp.net MVC4高级编程这本书学习记录的学习笔记,书本内容感觉挺简单的,但学习容易忘记,因此在边看的同时边作下了笔记,可能其它朋友看的话没有情境和逻辑顺序还请谅解! 一. ...

  5. Nancy in .Net Core学习笔记 - 视图引擎

    前文中我们介绍了Nancy中的路由,这一篇我们来介绍一下Nancy中的视图引擎. Nancy中如何返回一个视图(View) 在ASP.NET Mvc中,我们使用ViewResult类来返回一个视图.N ...

  6. Backbone 学习笔记

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

  7. Asp.net MVC4高级编程学习笔记-视图学习第三课Razor页面布局20171010

    Razor页面布局 1)  在布局模板页中使用@RenderBody标记来渲染主要内容.比如很多web页面说头部和尾部相同,中间内容部分使用@RenderBody来显示不同的页面内容. 2)  在布局 ...

  8. sql视图学习笔记--视图

    视图是为用户对数据多种显示需求而创建的,其主要用在一下几种情况: (1)限制用户只能访问特定表特定条件的内容,提高系统的安全性. (2)隐藏表结构.创建多种形式的数透视,满足不同用户需求. (3)将复 ...

  9. backbone学习笔记(一)

    因为工作的需要,从今天起对backbone的学习过程做下记录. 学习计划: 1.1周看基本知识(2014/1/18-2014/1/25) 2.基本知识总结(2014/1/26) 3.半周按教程写hel ...

随机推荐

  1. 《快学 Go 语言》第 16 课 —— 包管理 GOPATH 和 Vendor

    到目前位置我们一直在编写单文件代码,只有一个 main.go 文件.本节我们要开始朝完整的项目结构迈进,需要使用 Go 语言的模块管理功能来组织很多的代码文件. 细数 Go 语言的历史发展,模块管理经 ...

  2. 基于Zookeeper的分步式队列系统集成案例

    基于Zookeeper的分步式队列系统集成案例 Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pig, HBase, Sqoop, Mahout, ...

  3. 微信小程序——文本的展开与收起

    动态效果如下: 就是默认只显示4行,点击展开的按钮显示全部,再点击隐藏. 主要通过css来控制 主要的css: .flex-text{ margin-top: 10px; display: -webk ...

  4. RMySQL数据库编程指南

    R语言作为统计学一门语言,一直在小众领域闪耀着光芒.直到大数据的爆发,R语言变成了一门炙手可热的数据分析的利器.随着越来越多的工程背景的人的加入,R语言的社区在迅速扩大成长.现在已不仅仅是统计领域,教 ...

  5. 启动另一个app

    (一) 通过包名.类名 开发有时需要在一个应用中启动另一个应用,比如Launcher加载所有的已安装的程序的列表,当点击图标时可以启动另一个应用.一般我们知道了另一个应用的包名和MainActivit ...

  6. [转]Android精品开源项目整理

    前言:       无论你是android的初学者,还有是android开发多年的高手,可能都会有很多想法和经验希望与人分享交流,渴望能够接触到更多的实战项目,正所谓所谓与高手论道才能互补所长,与英雄 ...

  7. SAP 产品条码WMS结合 以及ABAP script的集成 BarCode

    条码和RFID打印解决方案   1, 热转印条码标签打印 热转打印技术的原理是通过加温和加压将色带上的固体油墨熔化转印到介质上完成打印的.通过选择热转印色带与标签材料匹配,热转印打印方式可以产生耐高温 ...

  8. spatial transformer networks 这篇论文

    大致看了看这个paper, 很novel. 我的观点: 在traditional convolutional neural netwoks 中,我们通常会depend 于 extracting fea ...

  9. 使用Unity中的Box Collider组件完成游戏场景中的碰撞检测功能

    一.介绍 目的:通过Unity自带的组件完成游戏场景中的碰撞检测功能. 软件环境:Unity 2017.3.0f3 二.实现过程 1,在面板中点击Add Component按钮 2,添加Box Col ...

  10. 在Unity场景中控制日夜的轮转

    一.介绍 目的:通过在Unity场景中添加C#脚本完成日夜轮转的效果. 软件环境:Unity 2017.3.0f3,VS2013 二.操作过程 通过拖拽场景中的Directional Light我们知 ...