Knowledge points that knockoutjs is easy to confuse (Template template binding)

The template is to be freed from splicing strings. We only need to render data according to certain tags, without using javascript code to manipulate DOM to fill data. Two template styles are used in knockoutjs, one is the jquery tmpl template, and the other is the underscore template style. 1.jquery tmpl template style

1 <html>
 2 <head>
 3 </head>
 4 <body>
 5          <script src= " https://cdn.bootcss.com/jquery/1.9.1/jquery.js " ></script> // Can not be written as the end of /> or the error can only be written as </script>
 6          <script src= " jquery.tmpl.js " ></script> // Can not be written as the end of /> or the error can only be written as </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 template style

 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>

Two template styles, jquery tmpl and underscore, can be used in knockoutjs.

When knockoutjs refers to a module, the binding attribute name corresponds to the id of the template, and data corresponds to the data map of the module. The code that directly manipulates the dom is omitted, and the module can be automatically loaded by using the declaration.

 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>

Knowledge points that knockoutjs is easy to confuse (Template template binding)

Guess you like