Question

我在向Component动态添加ContainerView时遇到问题。看到这个jsfiddle：

http://jsfiddle.net/theazureshadow/7n2hz/

组件根元素放在容器中，但不会呈现与组件关联的布局。

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({});

App.IndexView = Ember.View.extend({
    didInsertElement: function() {
        console.log('IndexView inserted');
        var container = this.get('container');
        container.pushObject(Ember.TextField.create());
        container.pushObject(App.MyComponent.create());
    }
});

App.MyContainer = Ember.ContainerView.extend({
    didInsertElement: function() {
        console.log('MyContainer inserted');
    }
});

App.MyComponent = Ember.Component.extend({
    classNames: ['my-component'],
    //template: Ember.Handlebars.compile('<p>Compiled directly</p>'),
    didInsertElement: function() {
        console.log('MyComponent inserted');
    }
});

如果我取消注释template属性，它会正确呈现该内容。我还将组件直接插入到索引视图中，并在其中正确呈现（尽管在这种情况下不添加classNames）。

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <h2>Render component directly:</h2>
    {{my-component}}
    <hr/>
    <h2>Add component to container:</h2>
    {{view App.MyContainer viewName="container"}}
</script>
    <script type="text/x-handlebars" data-template-name="components/my-component">
    <b>My component</b>
</script>

我已经尝试过使用Ember.run，但到目前为止还没有运气。 didInsertElement的{{1}}是错误的挂钩吗？

Answer 1

那应该可以解决你的问题。请参阅layoutName属性。

App.MyComponent = Ember.Component.extend({
    classNames: ['my-component'],
    layoutName: 'components/my-component',
    didInsertElement: function() {
        console.log('MyComponent inserted');
    }
});

组件布局未在ContainerView中呈现

1 个答案: