knockout.js模板绑定之利用Underscore.js模板引擎示例

最新推荐文章于 2025-11-03 14:19:04 发布

转载最新推荐文章于 2025-11-03 14:19:04 发布 · 818 阅读

knockout 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了如何利用Underscore模板引擎和Knockout.js实现动态HTML内容生成，包括创建ViewModel和模板引擎实例化，通过模板引擎将数据绑定到HTML模板中，展示动态更新的人员列表。

View代码

 1 <h1>People</h1>
 2 <ul data-bind="template: { name: 'peopleList' }"></ul>
 3 
 4 <script type="text/html" id="peopleList">
 5     <% _.each(people(), function(person) { %>
 6         <li>
 7             <b data-bind="text: person.name"></b> is <%= person.age %> years old
 8         </li>
 9     <% }) %>
10 </script>

ViewModel

1 var viewModel = {
2     people: ko.observableArray([
3         { name: 'Rod', age: 123 },
4         { name: 'Jane', age: 125 },
5     ])        
6 };
7         
8 ko.applyBindings(viewModel);

整合underscore模板引擎与knockout.js

 1    // 可以单独放在一个js文件中
 2     ko.underscoreTemplateEngine = function () { }
 3     ko.underscoreTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
 4         renderTemplateSource: function (templateSource, bindingContext, options) {
 5             // 预编译和缓存效率的模板
 6             var precompiled = templateSource['data']('precompiled');
 7             if (!precompiled) {
 8                 precompiled = _.template("<% with($data) { %> " + templateSource.text() + " <% } %>");
 9                 templateSource['data']('precompiled', precompiled);
10             }
11             // 运行模板并解析成 DOM elements
12             var renderedMarkup = precompiled(bindingContext).replace(/\s+/g, " ");
13             return ko.utils.parseHtmlFragment(renderedMarkup);
14         },
15         createJavaScriptEvaluatorBlock: function(script) {
16             return "<%= " + script + " %>";
17         }
18     });
19     ko.setTemplateEngine(new ko.underscoreTemplateEngine());