0

JsRender を使用して HTML ページを作成していますが、次のことを実現したいと考えています。

<script id="qtype" type="text/x-jsrender">
   <li class="question-container" data-type="{{:Question.Type}}">
       {{include tmpl="#inner-template"/}}
   </li>
</script>

私ができるようにしたいのは、レンダリングされているモデル内のいくつかのプロパティに基づいて内部テンプレートを含めることです。たとえば、私のモデルに 'Type' という名前のプロパティがある場合、無効な構文であるが、次のように要件が説明されます (うまくいけば)

{{include tmpl=:"#" + Question.Type}}

または、おそらく「ヘルパー」メソッドを使用します。

{{include tmpl=~GetTemplateName(Question.Type)}}

テンプレート名をモデルに追加しようとしましたが、include ステートメントで機能させることができませんでした:

{{include tmpl=templateName/}}

これが可能かどうか、またはおそらく別の提案があるかどうか、誰か教えてもらえますか?

ありがとう。

4

2 に答える 2

2

私は最新のビルドを使用してきましたが、このアプローチはうまく機能します。

インラインテンプレートの場合：

// given an inline template named 'myTmpl'
{{for myModel.someProperty tmpl="#myTmpl" /}}

コンパイルされたテンプレートの場合：

// given a compiles template named 'myTmpl'
{{for myModel.someProperty tmpl="myTmpl" /}}

コードに欠けているのは引用符だと思います。コンパイルテンプレートであろうとインラインテンプレートであろうと、それでも必要です。「include」キーワードがまだサポートされているかどうかはわかりませんが、{{for /}}を使用すると、渡されたモデルが配列であるかどうかに関係なく問題なく機能します。重要なのは、jsRenderは渡されたすべてのものを配列として扱いますが、値が1つしかない場合は1回だけレンダリングします。

また、テンプレートを正しくコンパイルしていることを確認してください。ユーティリティ関数を使用して、事前にすべてをコンパイルしました。

function () {
    return $.when(
        $.get(getPath("templateOne")),
        $.get(getPath("templateTwo"))
    )
    .done(function (one, two) {
        $.templates({
            tmplOne: one[0],
            tmplTwo: one[0]
        });
    });
}

これにより、他のテンプレートで使用できる「tmplOne」と「tmplTwo」という名前の2つのコンパイルテンプレートが作成されます。

ただし、注意すべき1つの問題は、コンパイルに時間がかかることです。コンパイルする前にテンプレートを使用しようとすると、jsRenderはそれをまだ認識せず、非常に奇妙な動作をします。したがって、Promiseを返して、コンパイルする前にテンプレートを使用しないようにします。

compileTemplates().done(function() {
    // do my work with compile templates here.
}).fail(function() {  /* handle failure */ });
于 2013-03-20T12:58:04.877 に答える
0

Build update 27 は私の問題に対処しているようです。{{include}} ステートメントが変更され、テンプレート名をモデルの一部として定義し、次のスクリプトを使用できるようになりました。

<script id="qtype" type="text/x-jsrender">
    <li class="question-container" data-type="{{:Question.Type}}">
        {{include tmpl="#templateId" /}}
    </li>
</script>

より完全な議論はhttps://github.com/BorisMoore/jsrender/issues/155にあります。

于 2013-03-15T15:14:03.847 に答える