Ember Component data not appended inside the component

Question

I have a Component and showing it dynamically when a user clicks on a button.

I toggle a variable to insert the component into the DOM and inserting some new content inside the component.

But when I toggle the variable the component is inserted inside the DOM but my new content is not loaded inside the component.

Template:

<script type="text/x-handlebars" data-template-name="index">
    <div {{action showDialogComponent}}>Show Dialog</div>
    <div {{action showDialogComponent1}}>Show Dialog1</div>
        {{#if showDialog}}
            {{temp-dialog}}
        {{/if}}
</script>

Components:

<script type="text/x-handlebars" data-template-name="components/temp-dialog">
    <div id="dialogdiv"> This is a dilaog div.</div>
</script>

JavaScript:

App.IndexRoute = Ember.Route.extend({
    actions:{
        showDialogComponent: function(){
            this.controller.set('showDialog', true);
            $('#dialogdiv').html('New Content Loaded.');
        },
        showDialogComponent1: function(){
            this.controller.set('showDialog', true);
            $('#dialogdiv').html('New Content1111 Loaded.');
        } 
});

App.IndexController = Ember.Controller.extend({
    showDialog: false
});

App.TempDialogComponent = Ember.Component.extend({
    didInsertElement: function(){
        // But need to load different content based on the context.
       // $('#dialogdiv').html('New Content Loaded.');
    }
});

If the data loaded is unique I can add the data in didInsertElement hook.

How can I add my new content inside my component based on the click action triggered on the Route.

JSBin --> Link

But need to load different content based on the context. That sounds like a good reason to use a block component. Is that an option for you? — GJK
@GJK Thanks for your reply, block component do not help me. My component is same but the content loading inside differs. Also I need to load the content which is constructed in IndexRoute actions handler methods. — Jeevi

Kingpin2k Kingpin2k · Accepted Answer · 2014-06-06T14:25:13

Bind your internal property and send it in when creating the component.

Note: adding an id to a component is generally not recommended, since it really limits it's reusability.

App.IndexController = Ember.Controller.extend({
  showDialog: false,
  foo: 'hello world',
  bar: 'hello world 2',
  baz: '',
  actions:{
    showDialogComponent: function(val){
      this.set('showDialog', true);
      this.set('componentData', val);
    }
  } 
});


  <script type="text/x-handlebars" data-template-name="index">
    <div {{action showDialogComponent baz}}>Show Dialog</div>
    <div {{action showDialogComponent foo}}>Show Dialog1</div>
    <div {{action showDialogComponent bar}}>Show Dialog2</div>
    {{#if showDialog}}
       {{temp-dialog data=componentData}}
    {{/if}}
  </script>

  <script type="text/x-handlebars" data-template-name="components/temp-dialog">
    <h1>Component</h1>
    <div class="dialogdiv">{{data}}</div>
  </script>

http://emberjs.jsbin.com/rekohiti/1/edit

Ember Component data not appended inside the component

1 Answers