3

問題

パフォーマンスのために、デフォルトの KnockoutJS テンプレート エンジンの代わりにアンダースコア テンプレートを使用する必要があります。ただし、私はasp.net環境にいるため、asp.netハンドラーが原因で、とのデフォルトのタグは機能<%し%>ません。

ワーキングjsFiddle

動作しないjsFiddle

私が必要とするのは、次のようなものを適用することです:

_.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
};

{{と}}タグを使用する

注 7: Underscore.js テンプレート エンジンの使用

Underscore.js テンプレート エンジンは、デフォルトで ERB スタイルの区切り文字 ( <%= ... %>) を使用します。前の例のテンプレートがアンダースコアでどのように見えるかを次に示します。

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

Underscore テンプレートを Knockout と統合する簡単な実装を次に示します。統合コードの長さはわずか 16 行ですが、Knockout データ バインド属性 (したがってネストされたテンプレート) と Knockout バインディング コンテキスト変数 ($parent、$root など) をサポートするには十分です。

区切り文字が気に入らない場合<%= ... %>は、選択した他の区切り文字を使用するようにアンダースコア テンプレート エンジンを構成できます。

knockoutjs.comから取得

上記の太字のドキュメントから

区切り文字を変更できると記載されていますが、その方法についての詳細は指定されていません...

現在の試行

ko.underscoreTemplateEngine = function() {
};
ko.underscoreTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
    renderTemplateSource: function (templateSource, bindingContext, options) {
        // Precompile and cache the templates for efficiency
        var precompiled = templateSource['data']('precompiled');
        if (!precompiled) {
            precompiled = _.template("<% with($data) { %> " + templateSource.text() + " <% } %>");
            templateSource['data']('precompiled', precompiled);
        }
        // Run the template and parse its output into an array of DOM elements
        var renderedMarkup = precompiled(bindingContext).replace(/\s+/g, " ");
        return ko.utils.parseHtmlFragment(renderedMarkup);
    },
    createJavaScriptEvaluatorBlock: function(script) {
        return "<%= " + script + " %>";
    }
});
ko.setTemplateEngine(new ko.underscoreTemplateEngine());

更新: 上記を使用しなくなりました。jquery、アンダースコア、およびノックアウトを含めるだけです。それからscript私はただ持っています

_.templateSettings = {
    interpolate: /\{\{([\s\S]+?)\}\}/g
};

ただし、何も解析されていません。

テンプレート宣言は

<script type="text/html" id="common-table-template">
4

3 に答える 3

0

アンダースコアの区切り文字を変更する方法を尋ねていますか? このSOの答えには正しい答えがあるようです。基本的に、データをネストするための独自の正規表現を定義できます。

_.template("hello <?= name ?>", {"name": "Mike"}, {"interpolate": /<?=([\s\S]+?)%>/g) ?>})

いくつかの補足事項:

パフォーマンス上の理由から、Knockout のネイティブ テンプレート エンジンではなく、Underscore を使用しているとのことです。熱心な Knockout ユーザーとして、これは怪しいように聞こえます。Knockout のネイティブ テンプレート エンジンは非常に高速で、最終的に Knockout にプラグインされたサード パーティのエンジンよりもはるかに多くのテストが行​​われました。私は KO で数多くのアプリケーションを構築してきましたが、テンプレート エンジンが遅すぎるという問題は一度もありませんでした。Underscore を本当に使用する必要があることを確認してください。ほとんどの場合、Knockout のネイティブ テンプレート エンジンは問題なく動作します。

次に、Razor の構文を知っていますか? これはアンダースコアに干渉しません。

于 2013-08-23T19:10:42.090 に答える
0

構成はグローバルなので、_.templateSettingsブロックを追加するだけです

_.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
};

コードの前の任意の場所。

于 2013-08-23T19:12:29.360 に答える