重新渲染組件在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狀態仍然會包含舊數據。