如何在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其屬性相匹配，其中，如果其財產的顏色與性質的循環匹配，那麼將適用於一些類。

我tried-

<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屬性hrough到嵌套模板上下文：

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