RaideSJS вложенный список Развернуть / свернуть детей

Question

Я играл с RACTAL.JS и пытаюсь получить чувство того, на что он способен. У меня есть пример, который довольно распространен, вид с какой-то внутренней логикой состояния, которую я хотел бы очистить отслеживание. После прохождения учебных пособий это кажется, что-то, как-то, на самом деле, будет действительно хорошо, но мне трудно выяснить это.

---

Обновление: Я пересмотрел свой тестовый случай ниже, основываясь на отзывах в первом ответе, который я получил, чтобы уточнить точную проблему, которую я имел. Здесь вы можете увидеть полный пример: http://jsfiddle.net/e7mjm/1/ P >.

Во-первых, у меня есть равный шаблон:

<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 Widdle, вы увидите, что шаблон отображается правильно, но поведение взаимодействия не совсем правильно: Если вы нажмете на a.expand, он открывает этот раздел, но это также меняет класс всех Другие значки a.expand, а не только тот, который нажал.

Это реальная проблема, в которой я имел, в привязке равных событий не может быть не очень хорошим способом для меня определить взаимодействие, которое влияет на конкретный объект данных, с которыми пользователь взаимодействует, вместо этого Взаимодействие, похоже, влияет на все данные.

Любое представление о том, как правильно обладать?

Answer 1

Вот пример http://jsfiddle.net/e7mjm/

Я изменился на

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

.

Теперь он будет представлять «по запросу», когда вы открываете

И вы можете использовать event.context.Просто делай

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

.