RactiveJS嵌套列表展開/收起兒童

Question

我一直在玩ractive.js，並試圖瞭解它的功能。我有一個相當普遍的例子，它帶有一些我想幹淨地記住的內部狀態邏輯。在閱讀完教程之後，這似乎是Ractive很擅長的事情，但我很難搞清楚這一點。

---

更新：我下面的修訂我的測試情況下，基於第一個答案我有反饋，澄清我一直有確切的問題。你可以在這裏看到完整的示例：http://jsfiddle.net/e7Mjm/1/

首先，我有一個ractive模板：

<div id="toc-view"></div> 
<script id="ractive-toc" type="text/ractive"> 
    <ul> 
    {{#chapters}} 
    <li class="{{type}}"> 
     <span class="ordinal">{{ordinalize(ordinal)}}</span> 
     <a data-id="{{element_id}}">{{title}}</a> 
     {{#(sections.length > 0)}} 
     <a class="{{open ? 'expand open' : 'expand'}}" on-click="toggleSections"></a> 
     {{#open}} 
     <ul class="{{open ? 'sections open' : 'sections'}}"> 
      {{#sections}}{{>section}}{{/sections}} 
     </ul> 
     {{/open}} 
     {{/()}} 
    </li> 
    {{/chapters}} 
    </ul> 

    <!-- {{>section}} --> 
    <li class="{{type}}"> 
    <span class="ordinal">{{ordinalize(ordinal)}}</span> 
    <a data-id="{{element_id}}">{{title}}</a> 
    </li> 
    <!-- {{/section}} --> 
</script> 

我有一些簡單的CSS樣式來格式化這個：

ul { list-style: none; padding: 0; margin: 0} 
ul.sections { padding-left: 20px; } 
a.expand { color: red; } 
a.expand:before { content: "+"; } 
a.expand.open { color: blue; } 
a.expand.open:before { content: "-"; } 

而下面的Javascript功能來使所有的工作：

data = [ 
    { 
    id: "smith-about", 
    title: "About this book", 
    type: "front-matter" 
    }, 
    { 
    id: "smith-preface", 
    title: "Preface", 
    type: "front-matter" 
    }, 
    { 
    id: "smith-ch01", 
    title: "Intro to Biology", 
    ordinal: "1", 
    type: "chapter", 
    sections: [ 
     { 
     id: "smith-ch01-s01", 
     title: "What is biology?", 
     ordinal: "1.1", 
     type: "section" 
     }, 
     { 
     id: "smith-ch01-s02", 
     title: "What is a biologist?", 
     ordinal: "1.2", 
     type: "section" 
     }, 
     { 
     id: "smith-ch01-s03", 
     title: "So you want to be a biologist?", 
     ordinal: "1.3", 
     type: "section" 
     } 
    ] 
    }, 
    { 
    id: "smith-ch02", 
    title: "Applied Biology", 
    ordinal: "2", 
    type: "chapter", 
    sections: [ 
     { 
     id: "smith-ch02-s01", 
     title: "Biology in the lab", 
     ordinal: "2.1", 
     type: "section" 
     }, 
     { 
     id: "smith-ch02-s02", 
     title: "Biology in the field", 
     ordinal: "2.2", 
     type: "section" 
     }, 
     { 
     id: "smith-ch02-s03", 
     title: "Biology in the classroom", 
     ordinal: "2.3", 
     type: "section" 
     } 
    ] 
    } 
] 

ractive = new Ractive({ 
    el: 'toc-view', 
    template: '#ractive-toc', 
    data: { 
    chapters: data, 
    ordinalize: function(ordinal) { 
     return ordinal ? ordinal + "." : "▸"; 
    } 
    } 
}); 

ractive.on('toggleSections', function(event) { 
    event.context.open = !event.context.open; 
    this.update(); 
}); 

如果你試試JS小提琴你會se e模板呈現正確，但交互行爲不太正確：如果您單擊a.expand它會打開該部分，但它也會更改所有其他a.expand圖標的類別，而不僅僅是單擊的部分。

這是我一直有的問題，在ractive事件綁定中似乎沒有一個很好的方法來定義一個隻影響用戶與之交互的特定數據對象的交互，而交互似乎影響所有的數據。

任何有關如何正確範圍的洞察？

Answer 1

下面是一個例子http://jsfiddle.net/e7Mjm/

我改

{{#open}}{{#sections}}{{>section}}{{/sections}}{{/open}} 

現在將呈現 「按需」 當您打開

，您可以使用event.context。只要做

event.context.open = !event.context.open; 
this.update();