再帰的にネストされたタグがあります:
<list>
<div if="{ items }">
<div each="{ items }">
<input type="checkbox" checked="{ selected }" onclick="{ parent.select }"> {name}
<list />
</div>
</div>
var parent = this.parent
select(e) {
var item = e.item
item.selected = !item.selected
parent.selected = item.selected // does not change parent's checkbox "checked" state
return true
}
</list>
次のように取り付けられます。
riot.mount('list', {
items: [
{name: "Item 1"},
{name: "Item 2", selected: true, items: [
{name: "Item 2.1", selected: true, items: [
{name: "Item 2.1.1}
]}
]}
]
})
タグコードのコメントで説明されているように、親のチェックボックスの「チェック済み」状態を変更する際に問題があります。ただし、「選択された」プロパティの値は期待どおりに変更されます。
親のチェックボックスの状態を変更したり、親タグの「select」メソッドを呼び出したりすることは可能ですか?