javascript - 包含异步请求时自动呈现一次 react 性

一个 Activity 实例可能包含远程数据，许多组件都包含远程数据。我的目标是在获得所有远程数据后仅一次渲染整个ractive实例。我的示例代码是here，我想知道如何将所有这些都放入插件中。

/*
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()
    }
})

最佳答案

如果要处理组件中的数据检索，则需要使用模板中的条件来控制渲染:

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

然后向主要组件添加一个 Prop :

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

这是完整的示例:http://jsfiddle.net/rkt8bgxm/