Ember 重新渲染组件答案

【问题标题】：Ember re render componentEmber 重新渲染组件
【发布时间】：2015-12-16 17:47:22
【问题描述】：

我有一个带有 jquery 菜单的组件，它可以转换 DOM。我需要重新渲染组件以再次启动结构。 jquery 菜单不能正常工作，所以我需要重新渲染组件。

//Parent Component hbs
<div id="container">
    {{menu-jquery model=model}}
</div>

//Parent Component js
export default Ember.Component.extend({

   refreshMenuData(){
      callToServer()// ajax call
      updateModel()// generate model from ajax response

      -> //how to delete and create menu component? or re render menu component?
   }
}

谢谢

【问题讨论】：

标签： ember.js

【解决方案1】：

一个组件有一个名为rerender的函数，你可以调用它来强制组件的rerender。虽然，我可能会推荐一种更好的方法。在解决了获取服务器数据的承诺后，手动销毁 jquery 插件，然后重新初始化该插件。

【讨论】：

谢谢，如何在代码中获取组件引用来调用渲染器方法？
调用重新渲染并没有改变任何东西，我找到了一种解决方法，将组件放在 {{#unless loading}} 块中，并在服务器调用之前将加载设置为 true。这会强制菜单组件重新渲染。

【解决方案2】：

我找到了一种将组件放在条件块中的解决方法。我在服务器调用之前将加载设置为false，在数据解析后设置为true。

{{#if loading}}
  // show loading message
{{else}}
  {{menu-jquery model=model}}
{{/if}}

这会强制菜单组件重新渲染。

【讨论】：

【解决方案3】：

你的问题不是很清楚。我假设，您将在组件内部使用 jquery ajax 进行服务器调用。在Ember.Component 中，您必须使用 .on("didInsertElement")，其工作方式与 jQuery(document).ready() 类似。所以你的组件看起来像这样

export default Ember.Component.extend({
    _onReady: function() {
        refreshMenuData();
        //whatever jquery code you want to execute here
    }.on('didInsertElement')
})

如果您可以在 Ember Twiddle 或 JSBin 中提供您的示例，我可以为您提供更好的帮助。

【讨论】：

对不起，我发现问题是jquery插件的konw问题，所以我需要删除并创建整个组件。