如何使用模板与淘汰赛，淘汰赛映射和jsrender

Question

我想使用jsRender模板呈现fullName，这只是firstName + ' ' + lastName。它不是使用数据呈现模板，而是呈现为{{=firstName}} {{=lastName}}。我怎样才能做到这一点？

实例：http://jsbin.com/inijay/2/edit

JS：

var data = { "firstName": "Ian", "lastName": "Davis" };
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);

HTML：

<input data-bind="value: firstName" type="text" />
<input data-bind="value: lastName" type="text" />
<span data-bind="template: 'fullNameTemplate'"></span>

模板：

<script id="fullNameTemplate" type="text/x-jquery-tmpl">
  {{=firstName}} {{=lastName}}
</script>

输出结果如下：

Answer 1

您必须安装自己的templateEngine。这是完成的结果：http://jsbin.com/inijay/3/edit

以下是相关代码：

ko.jsrenderTemplateEngine = function () { };
ko.jsrenderTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
    renderTemplateSource: function (templateSource, bindingContext, options) {
        // Precompile the wrapping div for templating
        var precompiled = templateSource['data']('precompiled');
        if (!precompiled) {
            precompiled = $('<div>', { text: templateSource.text() });
            templateSource['data']('precompiled', precompiled);
        }
        // Unwrap observables
        var unwrapped = ko.mapping.toJS(bindingContext.$data);
        // Render and parseHTMLFragment
        return ko.utils.parseHtmlFragment(precompiled.render(unwrapped));
    }
});
ko.setTemplateEngine(new ko.jsrenderTemplateEngine());

我也改变了你的jsrender模板：

<script id="fullNameTemplate" type="text/x-jquery-tmpl">
    {{:firstName}} {{:lastName}}
</script>

我从这里开始讨论基本代码设计：http://knockoutjs.com/documentation/template-binding.html#note_6_using_the_underscorejs_template_engine

另一方面，这个解决方案看起来并不那么快，因为jsrender的最优性因为必须始终展开observable而无法实现渲染。我相信最好使用Knockout的原生模板。

Answer 2

使用jQuery.tmpl的解决方案：http://jsbin.com/inijay/5/edit文档说，到目前为止它将更新为jsRender，但显然不是。文档：knockoutjs.com/documentation/template-binding.html