Question

我有一个Component，当用户点击按钮时会动态显示它。

我切换变量以将组件插入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 - ＆gt; Link

Answer 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

Ember组件数据未附加到组件内

1 个答案: