强制重新呈现自定义文本字段视图答案

【问题标题】：force re-render of custom textfield view强制重新呈现自定义文本字段视图
【发布时间】：2015-01-16 23:03:29
【问题描述】：

如何强制重新渲染自定义文本字段视图？

我创建一个：

App.Select2View = Ember.TextField.extend({didInsertElement:function() {//plugin called here}});

它包含在模板表单中，当表单打开并且我选择另一个/不同的项目时，此自定义文本字段视图（基于选择 2）不会重新呈现但保持不变。

我有嵌套的路线/资源。公司下属公司。当我选择一家公司时，我有只读信息和编辑按钮，如果单击该按钮，可以将公司控制器上的操作调用到“isEditing”状态，在这种状态下，一个表单是打开的。如果我将状态更改为 false，它将返回只读模式（查看公司信息）。

如果我先把它设置回只读模式，然后再打开另一个项目，select2就会用这个公司的数据呈现。

但是如果它处于 isEditing 状态，表单打开并且我导航到另一个公司项目，所有表单输入字段都会根据模型更改（例如名称会更改，因为它绑定到公司模型的名称键值），但是select2 和之前的一样。

我不确定如何在 Ember 中重新渲染它。

这在主要公司模板视图下的模板中定义为部分：

<script type="text/x-handlebars" id="company/_edit">
    <p>{{input type="text" value=name}}</p>
    <p>
        {{view "select2"
        prompt="Search for companies" 
        resource="results" 
        displayKey="text" 
        onSelect="addCompany"
        onDeSelect="removeCompany"
        }}
    </p>
</script>

感谢任何指针。

【问题讨论】：

你能创建一个失败的 bin 吗？人们会回答你的问题。 emberjs.jsbin.com
当然，但这将不得不暂停，因为我遇到了其他问题，这可能也是问题的一部分。如果我清除它，我将发布一个 jsbin。基本上我的问题是当我单击处于“编辑”状态的另一个项目时，表单会呈现该项目并填充数据，但 select2 不会重新呈现。我临时解决的方法是在CompanyRoute上添加一个“beforeModel”方法，并执行：this.controllerFor('company').send('cancel')，取消编辑状态：this.set('isEditing '，真的）;用于 CompanyController 上的操作哈希中的取消。
然后当我点击编辑按钮时，它会渲染表单视图，同时渲染 select2。
问题在于，当它处于“编辑”状态时，我单击另一个项目，select2 将与单击的第一个项目保持相同。
也适用于我在 CompanyRoute 上使用的“willTransition”事件：this.controller.send('cancel');，但这又使它脱离了编辑状态，我想保留它编辑状态并导航到使用 select2 为该项目正确呈现的任何项目。很奇怪。

标签： ember.js

【解决方案1】：

我是 Ember 新手，我的回答可能不太恰当，但根据我的实验，问题是 Ember 尽可能多地缓存。所以它不会用select2完全重新渲染视图，只有当视图处于某个状态时，它会自动重新渲染。

至少目前的解决方案似乎是在 select2 自定义 TextField 上的“值”更改上添加一个带有观察者的“valueChange”方法，并进行与“didInsertElement”中相同的调用（在呈现视图时执行）：

valueChange: function() {
    Ember.run.scheduleOnce('afterRender', this, 'setupSelect2');
}.observes('value'),

现在，即使我处于“编辑”状态，它也会更新这个 select2，而不仅仅是与模型相关的标准表单输入。我现在可以导航到任何处于“编辑”状态的项目，该项目的表单为每个选定的项目打开，并且值在 select2 中相应更改。

【讨论】：