4

私はこの HTML と jsRender テンプレートを持っています:

<div id="output"></div>

<script id="template" type="text/x-jsrender">
<ul>
    {{for}}
    <li>{{:name}} likes to wear {{:shirtColor}} shirts</li>
    {{/for}}        
</ul>
</script>​

そして、私は次のようなJavaScript（jQuery）を持っています：

var data = [{
    name: 'Dan Wahlin',
    shirtColor: 'white'},
{
    name: 'John Papa',
    shirtColor: 'black'},
{
    name: 'Scott Guthrie',
    shirtColor: 'red'}
]
;

$('#output').html($('#template').render(data));​

お気づきかもしれませんが、これはジョン・パパの例です。つまり、少し修正しました。しかし、それはうまくいきません。その理由は、{{for}} が {{for people}} であり、データ オブジェクトが次のようになっているジョンの例のように、jsRender が Json のルート オブジェクトを想定しているためです。

var data = { people: [{
    name: 'Dan Wahlin',
    shirtColor: 'white'},
{
    name: 'John Papa',
    shirtColor: 'black'},
{
    name: 'Scott Guthrie',
    shirtColor: 'red'}
]
}
;

私の ASP.NET MVC コントローラーでは、返された Json はルート オブジェクトではありません。どうすればこれを機能させることができますか? Json 形式を変更します (どうすればよいですか?)? または、jsRender コードで何か問題がありますか?

前もって感謝します！

4

3 に答える 3

6

私も同じ問題を抱えていました。以下はあなたのためにトリックを行うはずです：

<script id="template" type="text/x-jsrender">
    <ul>
        {{for #data}}
            <li>{{>name}} likes to wear {{>shirtColor}} shirts</li>
        {{/for}}
    </ul>
</script>

これにより、イエスの答えのように個々のアイテムではなく、render メソッドに渡された配列をループできます。

于 2012-11-22T14:36:15.580 に答える
2

テンプレートを次のように変更します。

<ul id="output"></ul>
<script id="template" type="text/x-jsrender">
    <li>{{:name}} likes to wear {{:shirtColor}} shirts</li>
</script>​

働かなければならない。配列オブジェクトを使用してテンプレートをレンダリングすると、同じテンプレートがn回レンダリングされるためです。

于 2012-06-13T18:08:10.970 に答える
0

{{for}} を {{for people}} に変更します

于 2012-10-30T11:17:38.607 に答える