Question

我有一个视图，并且嵌入了一个组件。我想使用{{view}}帮助器将参数传递给视图，然后让组件也使用该数据，但它似乎不起作用。我不知道自己错过了什么......

以下是代码：

App.DisplayView = Ember.View.extend({
    templateName: 'display',
    property1: 'property1 default value',
    property2: 0,

    debugProps : function() {
        console.log('view property1: ' + this.get('property1'));
        console.log('view property2: ' + this.get('property2'));
    }.on('init')

});


App.DisplayEmbeddedComponent = Ember.Component.extend({
    prop1: 'prop1 default value',
    prop2: 0,

    actions : {
        buttonClicked: function() {
            console.log('button clicked!');
            console.log('prop1: ' + this.get('prop1'));
            console.log('prop2: ' + this.get('prop2'));
        }
    },

    debugProps : function() {
        console.log('this: ' + this);
        console.log('prop1: ' + this.get('prop1'));
        console.log('prop2: ' + this.get('prop2'));
    }.on('init')

});

模板如下：

<script type="text/x-handlebars" data-template-name="display">
    <h2>Dislay view</h2>
    {{display-embedded prop1=property1 prop2=property2 }}
</script>

<script type="text/x-handlebars" data-template-name="components/display-embedded">
    {{input value=prop1 type="text"}}
    {{input value=prop2 type="text"}}

    <button {{action "buttonClicked"}}>Button X</button>
</script>

然后我使用具有嵌入式组件的视图，如下所示：

{{view App.DisplayView property1='prop 1 value' property2='prop 2 value'}}

输出如下：

// this shows data has been passed to the view correctly
view property1: prop 1 value
view property2: prop 2 value

// this shows that "this" points to component as expected, but properties remain null
this: <App.DisplayEmbeddedComponent:ember526>
prop1: undefined
prop2: undefined

// same when I click the button in the component: properties are undefined
button clicked!
prop1: undefined
prop2: undefined

正如您所见prop1和prop2未定义，输入以空值开头，而不是传递给视图的值。

我做错了什么？我试图正确理解这种嵌套，但似乎没有任何文档可以涵盖视图中嵌入的组件的情况。

谢谢！

Answer 1

视图中定义的属性需要使用视图进行引用。

{{display-embedded prop1=view.property1 prop2=view.property2 }}

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

如何在视图中嵌入的Ember组件中进行此数据绑定？

1 个答案: