knockoutjs 容易混淆的知识点 (Template 模版绑定)

模版是为了从拼接字符串中解放出来，我们只需要根据一定的标签来渲染数据，不用使用javascript代码操作ＤＯＭ填充数据。在knockoutjs中采用两种模版风格，一种是jquery tmpl模版，一种是underscore模版风格。 1.jquery tmpl 模版风格

 1 <html>
 2 <head>
 3 </head>
 4 <body>
 5         <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>  //不能写成/>结尾否则出错只能写成</script>
 6         <script src="jquery.tmpl.js" ></script>  //不能写成/>结尾否则出错只能写成</script>

 7         
 8         <script type="text/html" id="aaa">
 9             <span>${Name}</span><br/>
10         </script>
11 
12         <script type="text/javascript">
13             $(function(){
14 
15                 var data = [
16                     {Name:"A"},
17                     {Name:"B"}
18                 ];
19 
20                 $('#aaa').tmpl(data).appendTo('#container');
21             });
22         </script>
23 
24         <div id="container">
25 
26         </div>
27 </body>
28 </html>

2.underscore 模版风格

 1 <html>
 2 
 3 <head>
 4 </head>
 5 
 6 <body>
 7     <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
 8     <script type="text/javascript" src="underscore.js"></script>
 9 
10     <script type="text/html" id="tpl">
11             <% _.each(data, function (item) { %>
12                 <span>
13                 <%= item.Name %> 
14                 </span><br/>
15             <% }); %>
16     </script>
17 
18     <script type="text/javascript">
19 
20         $(function () {
21 
22             var data = [
23                 { Name: "A" },
24                 { Name: "B" }];
25 
26             var t = _.template($("#tpl").html());
27             $('#container').html(t({ "data": data }));
28         });
29 
30     </script>
31     <div id="container"></div>
32 </body>
33 </html>

在knockoutjs 中可以使用jquery tmpl 和 underscore两种模版风格。

knockoutjs 引用模块时绑定属性name对应模版的id,data 对应的是模块的数据映射。省去了直接操作dom的代码,使用声明就可以自动load模块。

 1 <html>
 2 
 3 <head>
 4 </head>
 5 
 6 <body>
 7     <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
 8     <script src="jquery.tmpl.js"></script>
 9     <script language="javascript" src="https://cdn.bootcss.com/knockout/3.3.0/knockout-debug.js"></script>
10 
11     <script type="text/html" id="aaa">
12             {{each datasrc}}
13             <p>
14                 <b>${name}</b>
15             </p>
16             {{/each}}
17         </script>
18 
19     <script type="text/javascript">
20         $(function () {
21             var datas = [
22                 { name: 'A' },
23                 { name: 'B' },
24             ];
25             var viewModel = {
26                 datasrc: datas
27             };
28             ko.applyBindings(viewModel);
29         });
30     </script>
31     <div data-bind="template: 'aaa', data:'datasrc'"></div>
32 </body>
33 </html>

knockoutjs 容易混淆的知识点 (Template 模版绑定)

猜你喜欢