Javascript 如何使嵌入在视图中的Ember组件中的数据绑定起作用？

我有一个视图，其中嵌入了一个组件。我想用{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>

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

输出如下：

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

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

//这表明数据已正确传递到视图
查看属性1：属性1值
查看属性2：属性2值
//这表明“this”按预期指向组件，但属性仍然为null
这：
建议1：未定义
建议2：未定义
//单击组件中的按钮时相同：属性未定义
点击按钮！
建议1：未定义
建议2：未定义

如您所见，

prop1

和

prop2

显示为未定义，输入以空值开始，而不是我传递给视图的值

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

---

谢谢

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

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

---

谢谢你救了我一天。你知道有任何文档指出我可能遗漏了这一点吗？它真的起作用了吗，我去测试并传递给组件不起作用，它在范围内起作用（我在添加答案时最初测试的），但后来我创建了一个组件，但没有传递，它起作用了。小提琴中的问题是组件被传递了参数

jack

，而不是

blah

。过来看！哈哈，我喜欢做傻事，5小时的睡眠是不够的；）