如何在 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 。另请参阅特定主题访问父数据）

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

访问~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

Answer 2

此外，您可以使用#parent 。 请参阅文档链接。