Автоматическое рендеринг ractive один раз, когда содержит запросы aysnc

Question

Действительный экземпляр может включать в себя удаленные данные, а многие компоненты содержат удаленные данные. моя цель - отрисовать весь ractive экземпляр только один раз, когда мы получим весь удаленный пример кода data.my здесь, и я хочу знать, как поместить все это в плагин.

/*
DataGrid is a component that contains async request
*/
var DataGrid = Ractive.extend({
    template:'<ul>{{#datalist}}<li> {{.}}</li> {{/datalist}}</ul>',
    oninit: function(){
        var app = this
        // load init data by async request
        setTimeout(function() {
            app.set('datalist', [1, 3, 5])
            app.add('ajaxLoadedNum')
        }, 2000 * Math.random())
    }
})

Ractive.components.datagrid = DataGrid

var app = new Ractive({
    template: '#tmpl',
    data: {
        ajaxLoadedNum: 0,
        ajaxTotalNum: 3
    }
})

var listender = app.observe('ajaxLoadedNum', function(val, old){
    if (val == app.get('ajaxTotalNum')) {
        app.render('#c')
        listender.cancel()
    }
})

Answer 1

Если вы собираетесь обрабатывать извлечение данных в компонентах, то вам нужно обработать рендеринг, используя условие в шаблоне:

var DataGrid = Ractive.extend({
    template:'{{#if loaded}}<ul>{{#datalist}}<li> {{.}}</li> {{/datalist}}</ul>{{/if}}',
    ...

Затем добавьте опору в основной компонент:

computed: {
    loaded: '${ajaxLoadedNum} === ${ajaxTotalNum}'
}

Вот полный пример: http://jsfiddle.net/rkt8bgxm/