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

【问题标题】：How to access parent data properties in JsRender nested templates如何在 JsRender 嵌套模板中访问父数据属性
【发布时间】：2016-04-28 19:31:22
【问题描述】：

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

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

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

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

对象vm 有两个属性- 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 中找不到如何与其他对象匹配。

【问题讨论】：

标签： javascript jquery json jsrender

【解决方案1】：

你需要写

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

其中xxx 是父数据 - 在您的情况下，您作为根数据传入的vm。

（这都是关于'视图层次结构' - 请参阅：http://www.jsviews.com/#views。另请参阅特定主题Accessing parent data）

这里有几种不同的方式来获取父视图上的数据：

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

【讨论】：

【解决方案2】：

另外，您可以使用#parent。请参阅link 到文档。

【讨论】：