Ember选择设置内容绑定

时间:2013-11-26 22:16:50

标签: javascript ember.js handlebars.js

我使用更大视图中的嵌套视图/模板与Ember进行了相当复杂的设置。我的父视图有一个控制器,上面有一个数组,我想在内部视图/模板中用作我的Select的contentBinding。

我已经在我的内部模板中使用了把手助手,但我还想以编程方式扩展Select以添加一些验证样式支持。当我扩展Ember.Select然后设置contentBinding它不会。

我的模板中的示例:

{{view Ember.Select 
       prompt="Choose" 
       classNames="span12" 
       contentBinding="view.parentView.controller.countrylist" 
       optionLabelPath="content.name" 
       optionValuePath="content.id" 
       selectionBinding="view.parentView.controller.selectedObject"
       valueBinding="view.parentView.controller.model.state"}}

作为我用{{view view.selectBox}}显示的视图,我将selectBox设置为SelectBoxView。

SelectBoxView = Ember.Select.extend({
    prompt: "Please Choose",
    contentBinding: 'parentView.controller.countrylist',
    selectionBinding: 'parentView.controller.selectedObject',
    optionLabelPath: 'content.name',
    optionValuePath: 'content.id',
    classNames: ["span12"]

两个选择显示,但只有纯手柄有数据显示。我已经尝试了我能想到的所有组合,以便在我的外部View控制器中访问国家/地区列表。

编辑: http://emberjs.jsbin.com/oxAluJI/2/edit?html,js,output

好的,今天早上我搞砸了这一切。我遇到的问题是从“父母”控制器获取国家。我没有一个可以看到我的观点,并认为我可以绕过一个。

1 个答案:

答案 0 :(得分:0)

你不想在这样的绑定中进行硬编码,这是不好的做法。特别是因为他们超出了他们的范围寻找价值观。将国家/地区列表数组向下传递到视图中,并在创建选择器实例时附加它。

http://emberjs.jsbin.com/alAQEgux/3/edit

App.AppleView = Em.View.extend({
  templateName: 'apple'
});

App.SelectBoxView = Ember.Select.extend({
    prompt: "Please Choose",
    optionLabelPath: 'content',
    optionValuePath: 'content',
    classNames: ["span12"]
});

<script type="text/x-handlebars" data-template-name="index">
  {{view App.AppleView countryList=model}}
</script>

<script type="text/x-handlebars" data-template-name="apple">
  Apples
  {{view App.SelectBoxView contentBinding=view.countryList}}
</script>