Question

我有一个带有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?
   }
}

由于

Answer 1

组件有一个名为rerender的函数，您可以调用它来强制组件rerender。虽然，我可能会建议一个更好的方法。解决了获取服务器数据的承诺后，手动销毁jquery插件，然后重新启动所述插件。

Answer 2

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

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

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

Answer 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中提供您的示例，我可以帮助您更好。

灰烬重新渲染组件

3 个答案: