RACTICTJS 중첩 목록 확장 / 붕괴 어린이

Question

나는 ractive.js로 놀고있는 것에 대한 느낌을 얻으려고 노력하고 있습니다. 나는 공통적으로 공통적 인 예가 있으며, 내부 상태 논리가있는 뷰를 멋지게 유지하고 싶습니다. 튜토리얼을 통과 한 후에 이것은 밝은 무언가가 정말로 능력이있는 것처럼 보이지만, 나는 이것을 알아내는 데 어려움을 겪고 있습니다.

---

업데이트 : 나는 내가 가진 정확한 문제를 명확히하기 위해 내가 가진 첫 번째 대답에서 의견을 바탕으로 아래의 테스트 케이스를 개정했습니다. http://jsfiddle.net/e7mjm/1//A>

첫째, 나는 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 Fiddle을 시도하면 템플릿이 올바르게 렌더링되지만 상호 작용 동작은 a.expand를 클릭하면 해당 섹션이 열리지 만 모든 클래스가 변경됩니다. 클릭 한 것뿐만 아니라 다른 a.expand 아이콘.

이것은 내가 가지고있는 진짜 문제입니다. RACTIVE 이벤트 바인딩에는 사용자가 상호 작용하는 특정 데이터 객체에만 영향을 미치는 상호 작용을 정의 할 수있는 매우 좋은 방법이 아닙니다. 상호 작용은 모든 데이터에 영향을 미치는 것으로 보입니다.

이를 올바르게 범위를 적용하는 방법에 대한 통찰력이 있습니까?

Answer 1

다음은 http://jsfiddle.net/e7mjm/a>

로 변경되었습니다.

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

.

이제

를 열면 "주문시"렌더링됩니다.

event.context를 사용할 수 있습니다.그냥

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

.