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

View代码

 <h1>People</h1>
 <ul data-bind="template: { name: 'peopleList' }"></ul>

 <script type="text/html" id="peopleList">
     <% _.each(people(), function(person) { %>
         <li>
             <b data-bind="text: person.name"></b> is <%= person.age %> years old
         </li>
     <% }) %>
 </script>

ViewModel

 var viewModel = {
     people: ko.observableArray([
         { name: 'Rod', age: 123 },
         { name: 'Jane', age: 125 },
     ])
 };

 ko.applyBindings(viewModel);

整合underscore模板引擎与knockout.js

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

在线示例：http://jsfiddle.net/6pStz/

官方说明：http://knockoutjs.com/documentation/template-binding.html