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

Question

这个fiddle说明了我的问题。

假设我在 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 进行匹配，如果其属性颜色与循环中的属性匹配，则将应用一些 class.

我试过了-

 <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. See also the specific topic 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/

另请参阅此相关回复：

Answer 2

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

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

How to access parent data properties in JsRender nested templates

javascript

jquery

json

jsrender