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