Ember.js 如何使用组件中以父组件形式生成的值？

在我的Ember.js应用程序中，有一个带有表单的模板，用于多行用户输入。其中一个输入项是一个复杂的设置，我想重复使用，所以我把它放在一个组件中。但是，当用户提交表单时，不会发送来自组件的值。我该怎么做

例如，这是具有主窗体的模板：

<script type='text/x-handlebars' data-template-name='userForm'>
   // multiple inputs like this in the main template:
   {{view Ember.TextField valueBinding="newName"}}

   // and then I bring in the component:
   {{profile-details}}
   <button {{action addEntry}}>Add</button>
</script>

---

我希望发生的是，当用户单击模板中的按钮时，调用addEntry操作，来自组件输入的值将与模板的输入一起传递到userForm控制器。我该怎么做？谢谢

就像您可以将绑定传递到视图一样，您也可以将它们传递到组件。简单的回答是，您将声明一个附加属性（我们称之为

profileInformation

），并将其传递到

profile details

组件中。

配置文件详细信息

组件上的任何交互都会自动将

配置文件信息

同步到应用程序的其余部分

然后，在处理

addEntry

操作的任何函数中，都可以直接引用profileInformation变量

例如：

在模板中：

{{view Ember.TextField valueBinding="newName"}}
{{profile-details profileInformationBinding="myProfileInformation"}}
<button {{action addEntry}}>Add</button>

在您的组件中，您必须编写逻辑，以确保

profileInformation

保持更新。我不知道ProfileDetailsComponent中到底有什么，但它可能类似于一个computed属性，它连接了从该组件派生的一组不同的值

请注意，在本例中，

profileInformation

是组件看到的属性，而

myProfileInformation

是应用程序其余部分看到的属性。当然，它们可以被命名为相同的名称

{{view Ember.TextField valueBinding="newName"}}
{{profile-details profileInformationBinding="myProfileInformation"}}
<button {{action addEntry}}>Add</button>

actions:
  addEntry: ->
    # @get('myProfileInformation') --- you can access the details directly.