嗨,有RactiveJS用户,我是新来的,我非常兴奋使用RactiveJS,但我想知道是否可以更新Ractive实例中的模板/数据。
我有以下模态窗口:
<div id="modal" intro-outro="fade:100">
<div id="content">{{>content}}</div>
</div>
&gt;内容是排名模板。点击播放器的成像将需要使用playerProfile模板及其请求的数据覆盖排名。有没有其他方法可以通过拆卸然后使用playerProfile模板重新初始化模态窗口来完成?
更新
我忘了提到窗口将包含目前的20个模板(随着游戏变得越来越复杂,将来会增长)。我正在谈论的窗口是主模式窗口,显示用户触发的每个模板,如排名,邮件,报告,部落,地图等。
问候。
解决方法 Marty的答案是正确的,但我宁愿不让自己复杂化,只是在 #content div中创建新的Ractive实例,而不是创建整个模态窗口的不同实例,这些实例将会显示在初始化和隐藏在拆解。
答案 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)
})
否则它只会更改同一组件实例中的数据,这将无法重新创建并分配新模板。