JQuery模板 :(六)JsViews - 基于JsRender并具有动态绑定功能的模板

JeWangZhe 2013-07-30

一、什么是JsViews:

1) 下一代MVVM框架,兼具MVVM的特性和JavaScript的特性,使JsRender模板更加快捷和简单。

2) JsViews框架引入了声明式的数据绑定到JsRender Template,支持MVVM和MVP(自定义标签控制)。

3)是一个用于数据绑定的单page的app。

4)JsViews提供了动态绑定的功能,构建与JsRender模板之上。让JsRender template动起来。

二、简单的例子:

1. 使用template.link()

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<table><tbody id="peopleList"></tbody></table>

<script id="peopleTmpl" type="text/x-jsrender">
  <tr><td>
    <ul>
      {{for p}}
        <li>
          {{:name}}
        </li>
      {{/for}}
    </ul>
  </td></tr>
</script>


<script>
	var myTemplate = $.templates("#peopleTmpl");
	
	var people = [
	    {
	      name: "JoshWang"
	    },
	    {
	      name: "WangSheng"
	    }
	  ];
	
	var app = {
	    p: people
	  };
	
	myTemplate.link("#peopleList", app);
</script>

</body>
</html>

 说明:很容易看出这个例子和之前的JsRender sample的例子是极其类似的。唯一不同地方是,之前用于渲染template数据的两行代码现在只有一行代码即可。

var html = myTemplate.render(app);

$("#peopleList").html(html);
...用这行代码替代:
myTemplate.link("#peopleList", app);

第一个参数表示的是元素的container(此处是一个table)第二个参数表示的是用于渲染的数据。

2. Data-linking

      在JsViews中使用data-linking来进行数据绑定。但是涉及到一些特殊的应用的时候,就需要使用obserable的数组和对象了。

      例如,如果现在有一个对象,并且赋予其中一个属性 一个新的值,显然这里没有相关的事件来通知其他的code去更新该object。同样地,修改一个数组也不会有相关的事件通知其他的code做相关的更新。

      例子:(显示地修改对象和数组)

$("#addBtn").on("click", function(){
  $.observable(people).insert(people.length, {name: "name"});
})

实例1:可视的数组和对象(可视的意思是该对象或者数组发生变化时,template中与之绑定的数据也会自动更新)

<!DOCTYPE html>


<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<table><tbody id="peopleList"></tbody></table>

<script id="peopleTmpl" type="text/x-jsrender">
  <tr><td>
    <button id="addBtn">Add</button>
  </td></tr>
  {^{for p}}
    <tr><td>
      {{:name}}
    </td></tr>
  {{/for}}
</script>

<script>
	var myTemplate = $.templates("#peopleTmpl");
	
	var people = [
	    {
	      name: "JoshWang"
	    },
	    {
	      name: "WangSheng"
	    }
	  ];
	
	var app = {
	    p: people
	  };
	
	var html = myTemplate.link("#peopleList", app);
	
	$("#addBtn").on("click", function(){
	  $.observable(people).insert(people.length, {name: "newName"});
	})
</script>

</body>
</html>

代码说明:点击Add按钮,会添加一条记录到Array中,然后该template就会自动更新并显示出新加的这一行。使用的code是:$.observable(people).insert(people.length, {name: "name"});

但是需要注意的是这个template和之前的template所有不同,{^{for ...}}。如果去掉^,然后重新点击Add Button后,你会发现没有任何的变化。这是因为任何的常规的JsRender 的标签:{{someTag...}},无论是内置的还是自定义的,都可以通过添加^变成一个数据绑定标签:{^{some Tag...}}.换句话说,这样的标签就变成了动态的标签,当无论何时需要的哦时候,都会自动的的去重新渲染它(如果相关的数据发生变化时)。

        简言之:^这样的标签是动态的可用于动态绑定的标签,而没有^的标签是死的标签,不能用于数据绑定。

实例2: 可视的变化:属性变化。(可视表示属性发生变化时,template中绑定的内容也会自动刷新)

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<table><tbody id="peopleList"></tbody></table>

<script id="peopleTmpl" type="text/x-jsrender">
  <tr><td colspan="2">
    <button id="addBtn">Add</button>
  </td></tr>
  {^{for p}}
    <tr>
      <td>{^{:name}}</td>
      <td>
        <button class="changeBtn">Change</button>
      </td>
    </tr>
  {{/for}}
</script>

<script>
var myTemplate = $.templates("#peopleTmpl");

var people = [
    {
      name: "JoshWang"
    },
    {
      name: "WangSheng"
    }
  ];

var app = {
    p: people
  };

var counter = 1;

myTemplate.link("#peopleList", app);

$("#addBtn").on("click", function() {
  $.observable(people).insert(people.length, {name: "name"});
})

$("#peopleList").on("click", ".changeBtn", function() {
  var dataItem = $.view(this).data;
  $.observable(dataItem).setProperty("name", dataItem.name + counter++);
})

</script>

</body>
</html>

 代码解读:

1) $.observable(myObject)可以获取该对象的可视形式,即使该对象变成可视对象,即该对象的修改会引起和他绑定的template中相关内容的自动更新。

2)var dataItem = $.view(this).data 用于获取当前需要修改的object。

3.基于标签的”data-link"

<td data-link="name"></td>

这和上一个例子中的:

<td>{^{:name}}</td>

具有相关的效果。

4. 双向的数据绑定:

<td data-link="name"></td>
<td>
  <input data-link="name"/>
</td>

<input>和<td>都是数据绑定的,这使得不需要向实例2中那样添加一个propertyChange(属性变化)来使得template同时发生变化。

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<table><tbody id="peopleList"></tbody></table>

<script id="peopleTmpl" type="text/x-jsrender">
  <tr><td colspan="2">
    <button id="addBtn">Add</button>
  </td></tr>
  {^{for people}}
    <tr>
      <td data-link="name"></td>
      <td>
        <input data-link="name"/>
      </td>
    </tr>
  {{/for}}
</script>

<script>
var myTemplate = $.templates("#peopleTmpl");

var people = [
    {
      name: "JoshWang"
    },
    {
      name: "WangSheng"
    }
  ];

var app = {
    people: people
  };

var counter = 1;

myTemplate.link("#peopleList", app);

$("#addBtn").on("click", function() {
  $.observable(people).insert(people.length, {name: "name"});
})

</script>

</body>
</html>

5. 更加完整的例子:(在Select标签上使用数据绑定)

<!DOCTYPE html>

<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<table><tbody id="peopleList"></tbody></table>

<script id="peopleTmpl" type="text/x-jsrender">
  <tr><td>
    <button id="addBtn">Add</button>
    <button id="removeBtn" data-link="disabled{:selectedID === '0'}">Remove</button>
  </td></tr>
  <tr><td>
    <select data-link="selectedID" size="5">
      <option value="0">Choose a person to edit</option>
      {^{for people}}
        <option data-link="{:name} value{:ID} selected{:ID === ~root.selectedID}"></option>
      {{/for}}
    </select>
  </td></tr>
  <tr><td>
    <label>Name:<input data-link="{:selected().name:} disabled{:selectedID === '0'}" /></label>
    <label>Nickname:<input data-link="{:selected().nickname:} disabled{:selectedID === '0'}" /></label>
  </td></tr>
  <tr><td class="center">
    {^{for selected()}}
      {^{:name}}	
      {^{if nickname}}
        ( {^{:nickname}} )
      {{/if}}
    {{/for}}
  </td></tr>
</script>

<script>
var myTemplate = $.templates("#peopleTmpl");

var people = [
  {
    ID: "Ad0",
    name: "JoshWang"
  },
  {
    ID: "Ro0",
    name: "WangSheng",
    nickname: "Jack"
  }
];

var counter = 1;

var app = {
    people: people,
    selectedID: people[1].ID,
    selected: function() {
      for (var i=0; i<people.length; i++) {
        if (people[i].ID === this.selectedID) {
          return people[i];
        }
      }
      return {};
    }
  };

app.selected.depends = "selectedID";

// Data-link details container to people, using the peopleTmpl template
myTemplate.link("#peopleList", app);

$("#addBtn").on("click", function(){
var newID = "new" + counter++;
  $.observable(people).insert(people.length, {ID: newID, name: "name"});
  $.observable(app).setProperty("selectedID", newID);

})

$("#removeBtn").on("click", function(){
  $.observable(people).remove($.inArray(app.selected(), people));
  $.observable(app).setProperty("selectedID", "0");
})

</script>

</body>
</html>

运行效果图:


JQuery模板 :(六)JsViews - 基于JsRender并具有动态绑定功能的模板
 

三、综合实例

1. 动态绑定:所谓动态绑定就是当数据源发生变化时,与数据源绑定的组件也会动态的刷新。

<!DOCTYPE html>


<html>
<head>
    <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">
<div>
  Edit: <input type="checkbox" data-link="editable"/>
  <em>Name:</em> {^{:name}}
  {^{if showNickname && nickname}}
    (Goes by <em data-link="nickname"></em>)
  {{/if}}
  {^{if editable}}
    <div>
      <input data-link="name"/>
      <input data-link="nickname"/>
      <input type="checkbox" data-link="showNickname"/>
    </div>
  {{/if}}
</div>

</script>

<script>
var data = [
  {
    "name": "JoshWang",
    "nickname": "DW",
    "showNickname": true
  },
  {
    "name": "Susan",
    "nickname": "Sue",
    "showNickname": false
  }
];

var template = $.templates("#theTmpl");

template.link("#result", data);
</script>

</body>
</html>

代码解读

1){^{name}} ... {^{if showNickname && nickname}}.这些标签是数据绑定标签,当与之关联的数据发生变化时,在template中相关的数据单元也会自动的发生变化。

2)将{{if...}}改成{^{if...}}同样是数据绑定。当关联的数据发生变化时,整个template部分的内容会自动的移除或者是重新插入。

3)<em data-link="nickname">: 同样可使用element-based来做数据绑定,这里表示<em>标签的文本内容会自动的绑定到nickName的值。

4) <input data-link="name"/>:这里 input会一双重绑定的方式自动的绑定到相关联数据的name属性。在这里,当修改input text box中的值的时候,相关的关联数据也会自动的更新,二该template的其他data-linked到同样属性(name)的部分也会立即自动的更新。

相关推荐