console
Yox.component("Card", {
model: "options",
template: `
<div>
<span>type:{{type}} - index:{{index}} - value:{{options.value}}</span>
</div>
`,
watchers: {
"options.*": function(val, old, keypath){
}
},
afterMount: function(){
}
});
var app = new Yox({
el: '#app',
template: `
<div>
<div>yox version: {{version}}</div>
<div>
<button type="button" on-click="setValue()">set type 1</button>
</div>
<h3>cards</h3>
{{#each cards:index}}
<Card model="this.options" type="{{type}}" index="{{index}}" />
{{/each}}
</div>
`,
data: {
version: Yox.version,
cards: [
]
},
methods: {
setValue: function(){
app.setCardValueByType(1, {
value: "1111"
});
},
setCardValueByType: function(type, options){
var me = this;
var cards = _.filter(me.copy(me.get("cards", []), true), function (n, i) {
return n.type === type;
});
_.each(cards, function (n, index) {
var card = _.merge({}, n, {
options: options
});
me._set(`cards.${n.index}`, card);
});
}
},
afterMount: function(){
var me = this;
this.$tasks = [];
var _pendding = false;
me._set = function(keypath, value){
me.$tasks.push(function(){
me.set(keypath, value);
});
if(me.$tasks.length > 0) {
run();
}
}
var run = function(){
console.log("tasks:", me.$tasks.length)
if(_pendding === false && me.$tasks.length > 0){
me.$tasks[0]();
_pendding = false;
me.$tasks = _.drop(me.$tasks, 1);
setTimeout(function(){
run();
}, me.$tasks.length > 100 ? 16 : 32)
}
};
this.set("cards", _.map(_.range(0, 20), function(n, i){
return {
type: 1,
index: i,
options: {
value: "init"
}
}
}));
setInterval( ()=>{
setTimeout(function () {
console.log("2222")
app.setCardValueByType(1, {
value: "2222"
});
}, 2);
setTimeout(function () {
console.log("1111")
app.setCardValueByType(1, {
value: "4444"
});
}, 0);
}, 2000);
}
})
<div id="app">
</div>