如何在JsRender嵌套模板中访问父数据属性

Question

http://jsfiddle.net/tQnVt/621/

这个小提琴说明了我的问题.

假设我在jsrender模板的帮助下将JSON绑定到视图上.

var vm = {
    foo: {color: "red",otherObjectToMatch:"object"},
    testData: [{color: "red"}, {color: "yellow"}, {color: "blue"}]
};

对象vm有2个属性 - 1)普通对象2)对象数组.

模板-

<script id="template" type="text/x-jsrender">
    <p>
    {{:foo.color}}
    </p>
    <ul>
    {{for testData}}
        <li>index: {{>color}}</li>
    {{/for}}
    </ul>
</script>

我想从普通对象#1的属性匹配,如果它的属性颜色与循环中的属性匹配,那么将应用一些类.

我试过了-

 <p>
    {{:foo.color}}
    </p>
    <ul>
    {{for testData}}
       {{if foo.color=={{>color}} }}
         <li class='match'>index: {{>color}}</li>
       {{else}}
         <li>index: {{>color}}</li>
       {{/if}}
    {{/for}}
    </ul>

这是一次失败的尝试.我找不到如何匹配jsrender中的其他对象.

Answer 1

你需要写

{{if xxx.foo.color===color}}

xxx父数据在哪里- 在您的情况下,vm您作为根数据传入.

(这完全是关于' 视图层次结构 ' - 请参阅:http://www.jsviews.com/#views.)

以下是获取父视图数据的几种不同方法:

Access ~root是根数据的快捷帮助:

{{for testData}}
   {{if ~root.foo.color===color}} 
     <li class='match'>index: {{>color}} (match)</li>
   {{else}}
     <li>index: {{>color}}</li>
   {{/if}}
{{/for}}

创建上下文模板参数~foo以将foo属性从父数据传递到嵌套模板上下文:

{{for testData ~foo=foo}}
   {{if ~foo.color===color}}
     <li class='match'>index: {{>color}} (match)</li>
   {{else}}
     <li>index: {{>color}}</li>
   {{/if}}
{{/for}}

升级父view对象,获取数据视图:

{{for testData}}
   {{if #parent.parent.data.foo.color===color}}
     <li class='match'>index: {{>color}} (match)</li>
   {{else}}
     <li>index: {{>color}}</li>
   {{/if}}
{{/for}}

使用view.get()帮助程序查找类型视图的父级"data"

{{for testData}}
   {{if #get("data").data.foo.color===color}}
     <li class='match'>index: {{>color}} (match)</li>
   {{else}}
     <li>index: {{>color}}</li>
   {{/if}}
{{/for}}

我将所有这些添加到你的jsfiddle:http://jsfiddle.net/tQnVt/625/

另请参阅此相关回复:https://stackoverflow.com/a/34441881/1054484