重新渲染组件在Ember.js

Question

我试图DOM重新渲染DOM中的组件的HTML当我打电话this.rerender();在下面的例子中，我有一个数据保存到服务器的形式，并完成后我想重置表单以便用户可以提交更多数据。我不想单独清除每个属性（这只是一个例子，除了表单外还有其他用途）。目前，当我运行this.rerender();，它调用的方法，如didRender()但不替代DOM中的HTML。

有没有人有一个线索如何做到这一点？

实施例：

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> 

Answer 1

它确实重新渲染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状态仍然会包含旧数据。