RaideSJS вложенный список Развернуть / свернуть детей
-
02-01-2020 - |
Вопрос
Я играл с RACTAL.JS и пытаюсь получить чувство того, на что он способен. У меня есть пример, который довольно распространен, вид с какой-то внутренней логикой состояния, которую я хотел бы очистить отслеживание. После прохождения учебных пособий это кажется, что-то, как-то, на самом деле, будет действительно хорошо, но мне трудно выяснить это.
Во-первых, у меня есть равный шаблон:
<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
, а не только тот, который нажал.
Это реальная проблема, в которой я имел, в привязке равных событий не может быть не очень хорошим способом для меня определить взаимодействие, которое влияет на конкретный объект данных, с которыми пользователь взаимодействует, вместо этого Взаимодействие, похоже, влияет на все данные.
Любое представление о том, как правильно обладать?
Решение
Вот пример http://jsfiddle.net/e7mjm/
Я изменился на
{{#open}}{{#sections}}{{>section}}{{/sections}}{{/open}}
.
Теперь он будет представлять «по запросу», когда вы открываете
И вы можете использовать event.context
.Просто делай
event.context.open = !event.context.open;
this.update();
.