重新渲染组件在Ember.js
问题描述:
我试图DOM重新渲染DOM中的组件的HTML当我打电话this.rerender();
在下面的例子中,我有一个数据保存到服务器的形式,并完成后我想重置表单以便用户可以提交更多数据。我不想单独清除每个属性(这只是一个例子,除了表单外还有其他用途)。目前,当我运行this.rerender();
,它调用的方法,如didRender()
但不替代DOM中的HTML。重新渲染组件在Ember.js
有没有人有一个线索如何做到这一点?
实施例:
route.hbs
{{my-component}}
MY-component.js
actions: {
submit: {
// save form data to server, etc.
this.rerender(); // re-render html in DOM
}
}
MY-component.hbs
<form {{action 'submit' on='submit'>
{{input id='name' value=name}}
<button class="btn green" type="submit">Login</button>
</form>
答
它确实重新渲染DOM,还重新附加了您在组件中设置的所有变量。一个好的方法是为组件上的用户数据创建一个可以替换的变量。
因此,像这样在你的组件:
init() {
this._super(...arguments);
set(this, 'userData', Ember.Object.create());
},
actions: {
submit: {
// save form data to server, etc.
set(this, 'userData', Ember.Object.create());
}
}
然后在你的模板,而不是{{input id='name' value=name}}
做{{input id='name' value=userData.name}}
我觉得既然我们已经有了一丝也没有理由骂rerender
了。这种方法是不构建更换或更新DOM,或将在任何应用程序中经常使用情况使用。它唯一的目的是修复一些非常罕见的边缘情况。
对于每一个平常的用例烬会自动让你的DOM同步与JS的状态。所以你必须修正你的JS状态,而不是直接修改DOM。
此外,即使您可能替换您的DOM,这不会帮助您的问题,因为你的JS状态仍然会包含旧数据。
我确实有把所有的表单数据到像用户数据对象的想法,但我是有清除它的问题。我认为我的问题的根源在于我使用Materialize将组件放入模式中,并且导致组件在某些情况下出现奇怪现象。尽管如此,谢谢你的回答! –