MVC:视图view与模板(未完成)

主题:介绍MVC中的view和JavaScript的模板

包括以下分支:

1.动态渲染视图的方式
2.模板类库和存储模板的方式
3.数据绑定:让模型与控制器、视图与模型数据、视图数据动态同步连接


1.动态渲染视图的方式

首先是用createElement()来创建DOM元素:

原生JS的DOM操作:

var views = document.getElementById("#view");
views.innerHTML = ""; // 将元素内容清空

var container = document.createElement("div");
container.id = "user";

var name = document.createElement("span");
name.innerHTML = data.name;

container.appendChild(name);
views.appendChild(container);

相应jQuery的DOM操作:

$("#views").empty();

var container = $("
").attr({id: "user"}); var name = $("").text(data.name); $("#views").append(container.append(name));

待渲染的视图内容不多时可以用这种方式。但将视图元素放在控制器或状态里,其实是应用MVC架构的一种妥协办法。

除了以上这种将内容拼接进DOM元素的方式,更推荐将多个静态HTML包含在页面中,在必要的时候显示或隐藏。这会让控制器中所有和视图相关的代码量降到最低(因为只需要控制HTML页面之间的显示或隐藏 ),并且也能根据需要更新元素内容。

比如,创建一个HTML片段用于视图展示:

然后用jQuery更新视图,控制多个元素的显示或隐藏:

$("#views div").hide();

var container = $("#views .user");
container.find("span").text(data.name);
container.show();

这种方式可以让视图和控制器尽可能的分离。


2.模板类库和存储模板的方式

这里使用的是jQuery的模板类库jQuery.tmpl。另外推荐的一个是Mustache。

jQuery.tmpl的主要函数就是jQuery.tmpl(),可以给它传入一个模板和一些数据,这个函数会返回渲染好的元素节点,可以将渲染的结果追加至页面里。如果数据是数组的话,对于数组中的每个数据项都会生成渲染好的模板,否则将只会渲染一个模板。

也就是说,你把数据和模板先写好:

// 数据,这里用一个对象包含
var object = {
  url: "http://example.com",
  getName: function() {return "Trevor";}
};

// 模板
var template = '
  • ${getName}
  • ';

    然后再传入jQuery.tmpl函数:

    var element = jQuery.tmpl(template, object);
    // 函数输出的结果:
  • ${Trevor}
  • 最后再把结果用DOM操作添加进视图:

    $("body").append(element);
    

    除了引入变量,模板的另一个重要能力是条件流和迭代。在jQuery.tmpl里,条件流的语法是:

    // 条件流
    {{if url}}
      ${url}
    {{else}} //else可选
      

    Sorry

    {{/if}}

    遍历是模板类库的基础功能,使用{{each}}可以遍历任何包括object和array在内的类型。

    传入的如果是对象,模板会基于对象的属性遍历;同样,传入为数组的话,则是基于数组的索引做遍历。

    迭代的语法:

    // 迭代
    var object = {
      foo: "bar",
      messages: ["Hi, there", "Foo bar"]
    };
    
    // 在HTML里用模板遍历
    
      {{each messages}}
    • ${{$index + 1}}: ${{$value}}
    • {{/each}}
    一个重要的分离思想

    在模板里有时候会涉及到一些逻辑判断,字符串处理。这时就要把HTML里的逻辑在JS文件里封装成函数,再在HTML里相应位置调用这个函数。这么做的一个好处是这个函数变成了通用的,其他有相同逻辑的地方就可以重用。

    关于模板存储

    模板存储方式有:

    • 行内形式存储模板
    • 使用script标签
    • 远程加载

    推荐使用script标签来存储模板。


    3.数据绑定:让模型与控制器、视图与模型数据、视图数据动态同步连接

    本质上,绑定将视图元素和JavaScript对象(通常是模型)挂接在一起。当JS对象(模型)发生改变时,视图会根据新修改后的对象做适时更新。

    这意味着当记录发生改变时,你的控制器不必处理视图的更新,因为这些更新都是在后台自动完成的。

    你可能感兴趣的:(MVC:视图view与模板(未完成))