SOURCE

console 命令行工具 X clear

                    
>
console
Yox.component("Card", {
  
  model: "options",
  template: `

        <div>
            <span>type:{{type}} - index:{{index}} - value:{{options.value}}</span>
        </div>

    `,
    watchers: {
        "options.*": function(val, old, keypath){
            //console.log("watchers->", keypath, JSON.stringify(val), old)
        } 
    },
    afterMount: function(){
        //this.fire("updateMyIndex");
    }
});



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;

        //me.nextTick(function () {
            var cards = _.filter(me.copy(me.get("cards", []), true), function (n, i) {
     
                return n.type === type;
            });

            //console.log(type, cards.length)

            _.each(cards, function (n, index) {
                
                //me.nextTick(function () {

                    var card = _.merge({}, n, {
                        options: options
                    });

                    //console.log(type, n.index, JSON.stringify(card))
            
                    me._set(`cards.${n.index}`, card);
                    //me.forceUpdate();
                //});


            });
        //});
    } 
  },

  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)
            }
        };

        
        //console.log(1, JSON.stringify(app.get("cards")))
        
        // 初始化数据
        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);// <- here
 

            setTimeout(function () {
                console.log("1111")
                app.setCardValueByType(1, {
                    value: "4444"
                });
            }, 0);
            
        }, 2000);

 

        // run();

        
   
  }
  
})
<div id="app">
</div>

本项目引用的自定义外部资源