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

Question

这个jsfiddle演示了我的问题。

假设我正在使用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中与其他对象匹配。

- Manoz

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}}

逐级通过父视图对象，获取数据视图：

{{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

- BorisMoore

Answer 2

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

- Maksym Labutin