ember.js - 使用参数创建可重用的 Ember.Select 控件

Question

我想创建一个专门的选择控件视图，它应该只是添加一些功能。为简单起见，我只想添加一个标题。

控制/视图：

window.App.ControlsSelectView = Ember.View.extend({
    templateName: 'controls/SelectView',
    title:"Hello Control",
    contentBinding: null
 });

匹配的html：

<div class="sub_heading">
    <h2>{{title}}</h2>
</div>
<div class="inner_12 input_wrapper custom_select">
    {{view Ember.Select
           multiple="true"
           contentBinding= "contentBinding" // how to pass parameters through?
           selectionBinding="content.tempSelectedFunctions"
           optionLabelPath="content.displayname"
           optionValuePath="content.id"
    }}
</div>

用法应该是这样的：

{{ view App.ControlsSelectView 
    contentBinding="content.data.responsibilities" 
    selectionBinding="content.tempSelectedFunctions"
    title="content.responsibilitTitle"
}}

问题是，它不能那样工作。以上可能吗？还是有更好的模式来创建简单的可重用控件？

Answer 1

这篇文章帮助我走上了正确的轨道：

从 ContentBinding 获取视图中的内容

在控件视图的 html 中，我需要使用 view.propertyname 引用视图参数

工作解决方案：

HTML：

<div class="sub_heading">
    <h2>{{view.title}}</h2>
</div>
{{#if view.content}}
    <div class="inner_12 input_wrapper custom_select">
        {{view Ember.Select
               multiple="view.multiple"
               contentBinding= "view.content"
               selectionBinding="view.selection"
               optionLabelPathBinding="view.optionLabelPath"
               optionValuePathBinding="view.optionValuePath"
        }}
    </div>
{{/if}}

控制视图

window.App.ControlsSelectView = Ember.View.extend({
    templateName: 'controls/SelectView'

});

用法：

{{view App.ControlsSelectView
        title = "Function"
        multiple="true"
        contentBinding="content.data.functions"
        selectionBinding="content.tempSelectedFunctions"
        optionLabelPath="content.displayname"
        optionValuePath="content.id"

}}