mvc-5视图和模版

动态渲染视图

• 当待渲染的视图内容不多的时候，可以将视图元素放在控制器或者状态里

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

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

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

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

//或使用jquery

$("#views").empty();
var container = $("<div/>").attr({id: "user"});
var name = $("<span/>").text(data.name);
$("#views").append(container.append(name));

• 此外也可以将静态页面包含再页面中，再必要时候显示或隐藏；

模版

js模版的核心概念是，将包含模版变量的HTML片段和JavaScript对象做合并，把模版变量替换为对象中的属性值, 以下都以jquery.tmpl模版为例

<script type="text/javascript">
  var object = {
  	url: "https://www.google.com/",
  	getName: function () {
  		return "testName";
  	}
  };
  var tmpl = '<li><a href="${url}">${getName()}</a></li>';
  var elem = jQuery.tmpl(tmpl, object);
  $("body").append(elem);
</script>
//
<script id="tmpl" type="text/template">
	<li><a href="${url}">${getName()}</a></li>
</script>
<script type="text/javascript">
  var object = {
  	url: "https://www.google.com/",
  	getName: function () {
  		return "testName";
  	}
  };
  var elem = $("#tmpl").tmpl(object);
  elem.appendTo($("body"));
</script>

• 一些高级功能

<script type="text/template" id="tmpl">
	{{if url}}
	  ${url}
	{{/if}} 

	{{if messages.length}}
	  <ul>
	    {{each messages}}
	    <li>${$index + 1}: <em>${$value}</em></li>
	    {{/each}}
	{{else}}
	  no messages
	{{/if}}
</script>
<script type="text/javascript">
  var object = {
  	url: "https://www.google.com/",
  	messages: ['one', 'two'] 
  };
  var elem = $("#tmpl").tmpl(object);
  $("body").append(elem);
</script>

可以用$value变量来访问当前正被遍历的值；数组元素的索引可以使用$index变量来输出

模版helper

有时再视图内部使用通用helper函数，比如格式化一个日期或数字；为了保持mvc架构，最好的方法应该是将它们抽象出来，并用命名空间进行管理，而不是直接将函数掺进视图中，这样才能保持逻辑和视图之间的解偶

//替换一段纯文本中的<a></a>标签里的链接

<script type="text/tamplate" id="tmpl">
  ${helper.autoLink(this.data)}	 //这里data指代tmpl()方法传入的数据；
</script>
<script type="text/javascript">
  var helper = {};
  helper.autoLink = function(data) {
    var re = /((http|https|ftp)://[w?=&./-;#~%-]+(?![ws?&./;#~%"=-]*>]))/g;
    console.log(data);
    return (data.replace(re, '<a target="_blank" href="$1">$1</a>'));	
  };
  var elem = $("#tmpl").tmpl("https://github.com/maccman/jquery.tmpl");
  $("body").append(elem);
</script>

模版存储

包括

• JavaScript中以行内形式存储；//违背了MVC架构原则，不推荐
• 在自定义script标签里以行内形式存储; //推荐，通过Id来获取模版引用；浏览器不会对它们进行渲染而仅解析为内容文本
• 远处加载； //注意速度问题
• 在HTML中以行内形式存储

<script type="text/tamplate" id="tmpl">
  <span>${getName()}</span>
</script>
<script type="text/javascript">
 var data = {
 	getName: function() {return "Bob"}
 };
 var element = $("#tmpl").tmpl(data);
 element.appendTo($("body"));
</script>

• 在程序后台，jquery.tmpl会确保模版一旦生成后，解析后的模版就能被缓存住，而不必2次解析；
• 首先根据内容生成元素，然后将它追加到页面中，这种方式性能比操作已经追加至页面的元素更好，这是一种最佳实践
• 实际上运用一些“依赖管理工具”会更加简洁，如RequireJS

绑定

绑定将视图元素和js对象（通常是模型）挂接在一起；当js对象发生改变时，视图会根据新修改后的对象做适时更新

为了将js对象和视图绑定在一起，需要设置一个回调函数，当对象的熟悉发生改变时发送一个更新视图的通知

  var addChange = function (ob) {
    ob.change = function(cb) {
      if(cb) {
        if(!this._change) this._change = [];
        this._change.push(cb);
      } else {
        if(!this._change) return;
        for(var i = 0, len = this._change.length; i < len; i++) {
            this._change[i].apply(this);
        }
      }
    }
  } 

  var object = {};
  object.name = 'Foo';

  addChange(object);
  object.change(function() {
    console.log("Changed!", this);
    //添加更新视图的代码
  });

  object.change();
  object.name = "Bar";
  object.change();

给这个对象添加了change()回调， 这样就可以执行绑定和触发change事件

模型中的事件绑定

<script type="text/javascript" charset="utf-8">
    var User = function(name){
      this.name = name;
    };
    User.records = []
    User.bind = function(ev, callback) {
      var calls = this._callbacks || (this._callbacks = {});
      (this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);
    };
    User.trigger = function(ev) {
      var list, calls, i, l;
      if (!(calls = this._callbacks)) return this;
      if (!(list  = this._callbacks[ev])) return this;
      jQuery.each(list, function(){ this() })
    };
    
    User.create = function(name){
      this.records.push(new this(name));
      this.trigger("change")
    };
    jQuery(function($){
      User.bind("change", function(){
        var template = $("#userTmpl").tmpl(User.records);
    
        $("#users").empty();        
        $("#users").append(template);
      });
      
      User.create("First one");
      
      setTimeout(function(){
        User.create("Another one");
      }, 2000);
    });
  </script>
</head>

<body>
  <script id="userTmpl" type="text/x-jquery-tmpl">
    <li>${name}</li>
  </script>
  
  <ul id="users">
  </ul>
</body>