Ember 组件数据未附加在组件内答案

【问题标题】：Ember Component data not appended inside the componentEmber 组件数据未附加在组件内
【发布时间】：2014-07-27 13:00:48
【问题描述】：

我有一个组件，并在用户单击按钮时动态显示它。

我切换一个变量以将组件插入 DOM 并在组件内插入一些新内容。

但是当我切换变量时，组件被插入到 DOM 中，但我的新内容没有加载到组件中。

模板：

<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>

组件：

<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.');
    }
});

如果加载的数据是唯一的，我可以在 didInsertElement 挂钩中添加数据。

如何根据路由上触发的点击操作在组件中添加新内容。

JSBin --> Link

【问题讨论】：

But need to load different content based on the context. 这听起来是使用block component 的好理由。这对你来说是一个选择吗？
@GJK 感谢您的回复，块组件不帮助我。我的组件是相同的，但里面加载的内容不同。我还需要加载在 IndexRoute 操作处理程序方法中构造的内容。

标签： ember.js components

【解决方案1】：

绑定您的内部属性并在创建组件时将其发送。

注意：通常不建议向组件添加 id，因为它确实限制了它的可重用性。

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

【讨论】：