Ember re render component

问题

I have a component with a jquery menu that transforms the DOM. I need to re render the component for initiate the structure again. The jquery menu doesn't work dinamically, so I need to re render the component.

//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?
   }
}

Thanks

回答1:

A component has a function called rerenderthat you can call to force a rerender of the component. Although, I might recommend a better approach. Upon resolution of the promise that fetches your server data, manually destroy the jquery plugin and then reinit said plugin.

回答2:

I found a workaround putting the component inside a conditional block. I set loading in false before the server call and true after data parsing.

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

This force the menu component to re render.

回答3:

Your question is not quite clear. I am assuming that, you will be using jquery ajax for server calls inside the component. In Ember.Component, you have to use .on("didInsertElement") which works similarly as that of jQuery(document).ready(). So your component will look something like this

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

If you can provide your example in Ember Twiddle or JSBin, I can help you better.

来源：https://stackoverflow.com/questions/34318767/ember-re-render-component

标签

ember.js