2

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>

出力は次のようになります。壊れた jsrender テンプレート出力

4

2 に答える 2

2

自分でインストールする必要があります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 の最適性が役に立たなくなるからです。代わりに Knockout のネイティブ テンプレートを使用する方がよいと思います。

于 2012-10-03T21:59:52.790 に答える
0

jQuery.tmpl を使用したソリューション: http://jsbin.com/inijay/5/editドキュメントには、この時点で jsRender に更新されると記載されていますが、明らかに更新されていません。ドキュメントはこちら: knockoutjs.com/documentation/template-binding.html

于 2012-10-04T00:43:34.027 に答える