backbone的view模板(updateView)

//加载并初始化模板对象
var templateHTML = loadTemplate("assets/templates/cis_culture.html");

var CultureView = Backbone.View.extend({//options...
    initialize : function(option) {
        //初始化VIEW并让model与VIEW进行关联
        this.model.view = this;
        //初始化VIEW的HTMLDOM对象
        this.render();
    },
    template : templateHTML, //VIEW对应的模板
    render : function() {
        var self = this;
        if (this.template) {
            //使用模板+数据拼装DOM
            this.$el = $(this.template({
                data : this.model.attributes,
                encodeD : function(d) {
                    return encodeURIComponent(JSON.stringify(d));
                }
            }));

            appcan.button(this.$el,"btn-act",function(){
            })
        }
        //返回自身,便于promise调用
        return this;
    },
    updateView : function(model) {
        var self = this;
        var cltrTtl = model.get(‘cltrTtl‘);
        var cltrType = model.get(‘cltrType‘);
        $(‘.title‘, self.$el).html(cltrTtl);
        $(‘.type‘, self.$el).html(cltrType);
    }
});

//列表容器VIEW
var CultureListView = Backbone.View.extend({//options...

    initialize : function() {
        this.listenTo(this.collection, "add", this.add);
        this.listenTo(this.collection, "change", this.updateView);
        this.listenTo(this.collection, "remove", this.removeView);
        this.listenTo(this.collection, ‘sort‘, this.sort);
    },
    collection : new CultureCollection(), //collection,用于存储和管理数据
    el : ‘#list‘, //VIEW 对应 HTML 元素CSS选择器
    pageNo : 1,
    $norecord : $("#norecord"),
    load : function(type) {this.collection.fetch({
            params : {
                data : data
            },
            success : function(cols, resp, options) {
            },
            error : function(cols, error, options) {
            }
        });
    },
    add : function(model) {
        var view = new CultureView({
            model : model
        });
        this.$el.append(view.$el);
    },
    updateView : function(model) {
        var view = model.view;
        if (view) {
            this.$el.prepend(view.$el);
            view.updateView(model);
        }
    },
    removeView:function(model){
        var view = model.view;
        view.remove();
    },
    sort : function() {
        for (var i = 0; i < this.collection.length; i++) {
            var model = this.collection.models[i];
            if (model.view) {
                this.$el.append(model.view.$el);
            }
        }
    }
});

var cultureListView = new CultureListView();
时间: 2024-08-07 01:32:45

backbone的view模板(updateView)的相关文章

Backbone.js 使用模板

实际的应用中会使用到模板,Model 等,而模板又是进阶的基础.所以这里介绍在 View 中使用模板,以及如何向模板填充值,模板可以用字符串,或是用 <script type="text/template"> 声明的内容.使用 <%= %> 或 <%- %> 来声明变量输出的占位符. Backbone 的模板要用到的是 underscore.js 库, 要深入了解 Unserscore 就看官方的 Underscore.js 的文档,Undersco

tp框架视图层view——模板继承

在做网站的时候,每个网站都有头部和尾部,也就是菜单栏和页脚,网站的各个子网页的头部和尾部基本就是一样的,所以tp框架提供了一种模板继承的方法: 1.首先在View的Main文件夹下建立一个base.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

-_-#【Backbone】View

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../../app-min.css"> <script src="../../jquery/jquery-1.10.2.js"></

VMware Horizion view模板安装部署之win7模板制作

日前我对VMware Horzion view基础架构.基础组件安装进行了简单的介绍,今日 我将在原有基础之上,对windows模板进行安装部署,话不多说,直奔主题了. 1.安装windows 7 os,由于基础安装大家都比较了解,在此就不再过多的描述了,当OS部署安装完毕之后,对虚拟机进行vmtools安装 2.当完成上述步骤之后,需要将OS进行licens 授权. 3.检查并关闭防火墙 4.手动将模板机器DNS指向内网DNS 5.安装view agent,打开欢迎安装VMware horiz

mvc4根据域名切换View模板

重写模板查找方式: public class MyRazorViewEngine : RazorViewEngine { public MyRazorViewEngine() : base() { } private const string DefaultView = "~/Views/"; private const string MoblieDomain = "m."; private const string WwwFolder = "~/View

VMware Horizion view模板安装部署之win10模板制作

上期,我们对Windows 7模板的制作进行了简单的描述,今天我将带领大家对Win10模板制作进行描述.希望能为大家在工作之余起到参考和帮助作用. 针对模板的制作,基本的流程大致都是一样的过程,在此我就不做过多的描述,我将主要对测试过程中遇到的问题进行描述. 在使用Windows 10发布桌面时,曾遇到过如下问题,虚拟机模板生成的虚拟机无法激活,我尝试了多次的失败之后,终于找到了解决方法,具体方法简单描述如下: 1.通过搜索引擎,发现如下链接http://tieba.baidu.com/p/47

beego——view 模板语法

一.基本语法 go统一使用{{和}}作为左右标签,没有其它的标签符号. 使用"."来访问当前位置的上下文,使用"$"来引用当前模板根级的上下文,使用$var来访问创建的变量. 1.模板中支持的go语言符号 {{"string"}} // 一般 string {{`raw string`}} // 原始 string {{‘c‘}} // byte {{print nil}} // nil 也被支持 2.模板中的pipeline(管道) 可以是上下

tp5 view模板中 判断一个值是否在某个数组内 复选框用到了

{foreach $serviceInfo as $v} <div style="display: inline-block;margin-right: 10px;"> <input type="checkbox" value="{$v.service_item}" id="checkbox-{$v.id}" {in name="$v.id"value="$arr" }

view桌面模板准备注意事项

对于VMware view模板的准备建议如下: 1.找一个安装全新的操作系统: 2.安装vmtools,并更新Windows补丁: 3.建议关闭Windows防火墙,开启Windows远程桌面: 4.在Windows虚拟机上安装agent: 5.检查DNS设置,查看虚拟机能否正常获取IP地址: