console
Yox.component("switch-wrapper", {
//model:"a.b.c.value",
template: `
<div style="border: 1px solid; margin: 10px">
<i>list.{{index}}.a.b.c.value: {{a.b.c.value}}</i>
<br>
<$component checked="{{a.b.c.value}}" />
<$component checked="{{a.b.c.value}}" />
<$component checked="{{a.b.c.value}}" />
<$component checked="{{a.b.c.value}}" />
<$component checked="{{a.b.c.value}}" />
<Switch checked="{{a.b.c.value}}"></Switch>
<Switch checked="{{a.b.c.value}}"></Switch>
<Switch checked="{{a.b.c.value}}"></Switch>
<Switch checked="{{a.b.c.value}}"></Switch>
<Switch checked="{{a.b.c.value}}"></Switch>
</div>
`,
events: {
"change.switch"(event, data) {
event.stop()
console.log("catch change event", data.checked, this.get("index"))
//this.set("a.b.c.value", data.checked)
bus.fire("BUS_CHANGE.index", {index: this.get("index")});
this.nextTick(function(){
bus.fire("BUS_CHANGE.switch-wrapper", data);
})
}
}
});
let bus = new Yox();
let app = new Yox({
el: "#app",
template: `
<div>
<h3>{{version}}</h3>
<div>
{{#each list:index}}
<div>
<li>{{a.b.c.value}}</li>
<switch-wrapper {{...this}} index="{{index}}"/>
<switch-wrapper {{...this}} index="{{index}}" />
<switch-wrapper {{...this}} index="{{index}}" />
<switch-wrapper {{...this}} index="{{index}}" />
<switch-wrapper {{...this}} index="{{index}}" />
<switch-wrapper {{...this}} index="{{index}}" />
</div>
{{/each}}
</div>
</div>
`,
watchers: {
"list.*.*.*.*.*"(newVal, oldVal, keypath){
//console.log(newVal, oldVal, keypath)
}
},
data(){
return {
version: Yox.version,
index: 0,
list: [
{
component: "Switch",
a: {
b: {
c: {
value: true
}
}
}
},
{
component: "Switch",
a: {
b: {
c: {
value: false
}
}
}
},
{
component: "Switch",
a: {
b: {
c: {
value: true
}
}
}
}
]
}
},
events: {
},
methods: {
},
afterMount(){
var me = this;
bus.on("BUS_CHANGE.index", function(event, data){
console.log(`1 bus on BUS_CHANGE.index ${data.index}`)
me.set("index", data.index)
})
bus.on("BUS_CHANGE.switch-wrapper", function(event, data){
var index = me.get("index")
console.log(`2 bus on BUS_CHANGE.switch-wrapper ${JSON.stringify(data)}, ${me.get("index")}`)
//me.set(`list.${me.get("index")}.a.b.c.value`, data.checked)
var item = me.copy(me.get(`list.${index}`), true);
console.log(`before ${JSON.stringify(item)}`)
item.a.b.c.value = data.checked;
me.set(`list.${index}`, item);
console.log(`after ${JSON.stringify(item)}`)
return
me.nextTick(function(){
console.log(`3 forceUpdate`)
me.forceUpdate()
console.log("4", me.get(`list.${index}.a.b.c.value`))
console.log(`5 after forceUpdate ${JSON.stringify(me.get(""))}`)
});
})
}
});
<div id="app"></div>
<link rel="stylesheet" href="//unpkg.com/bell-ui@0.12.0/dist/bell-ui.css">
<script src="//unpkg.com/yox@1.0.0-alpha.121/dist/standard/dev/yox.js"></script>
<script src="//unpkg.com/bell-ui@0.12.0/dist/bell-ui.js"></script>
<script src="//unpkg.com/lodash@4.17.15/lodash.js"></script>