Question

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

假设我在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。请参阅link文档。

如何在JsRender嵌套模板

2 个答案: