如何更新partials

时间:2014-05-18 21:13:25

标签: ractivejs

嗨,有RactiveJS用户,我是新来的,我非常兴奋使用RactiveJS,但我想知道是否可以更新Ractive实例中的模板/数据。

我有以下模态窗口:

<div id="modal" intro-outro="fade:100">
    <div id="content">{{>content}}</div>
</div>

&gt;内容是排名模板。点击播放器的成像将需要使用playerProfile模板及其请求的数据覆盖排名。有没有其他方法可以通过拆卸然后使用playerProfile模板重新初始化模态窗口来完成?

更新

我忘了提到窗口将包含目前的20个模板(随着游戏变得越来越复杂,将来会增长)。我正在谈论的窗口是主模式窗口,显示用户触发的每个模板,如排名,邮件,报告,部落,地图等。

问候。

解决方法 Marty的答案是正确的,但我宁愿不让自己复杂化,只是在 #content div中创建新的Ractive实例,而不是创建整个模态窗口的不同实例,这些实例将会显示在初始化和隐藏在拆解。

1 个答案:

答案 0 :(得分:1)

如果你只有两种状态(而不是开放式动态),你可以有条件地阻止它们:

<div id="modal" intro-outro="fade:100">
    <div id="content">
        {{^selected}}{{>partial1}}{{/}}
        {{#selected}}{{>partial2}}{{/}}
    </div>
</div>

您可以在初始渲染后扩充数据模型。假设你有一个玩家点击处理程序:

ractive.on('playerSelected', function(e){
    //however your data works...
    $.get('/player?id=' + e.context.id, function(data){
        ractive.set(e.keypath + '.player', data.player)
        ractive.set(e.keypath + '.selected', true)
    })
})

如果您需要更动态的方法,可以使用组件动态设置部分。这是一个例子(http://jsfiddle.net/9Vja5/2/),你可以在4.0中做到这一点(4.1将在这方面提供一些改进)。使用主模板中的组件:

<div>
    {{#reset}}
    <dynamicPartial partial='{{partial}}'/>
    {{/}}
</div>

然后将模板设置为组件beforeInit中提供的部分:

Ractive.components.dynamicPartial = Ractive.extend({
    beforeInit: function(o){
        o.template = '{{>' + o.data.partial + '}}'
    }
})

部分需要全局定义,或者在动态组件上定义。

我正在使用偏爱,因为这就是你在问题中所拥有的。如果您有要分配的模板列表,则可以直接设置模板。或者您也可以通过'<' + component + '/>'将模板设置为组件。

重置是一种强迫Ractive重新渲染组件的攻击:

r.observe('partial', function(){
    r.set('reset', false)
    r.set('reset', true)
})

否则它只会更改同一组件实例中的数据,这将无法重新创建并分配新模板。