1

我有一个模型Currencies。模型中的字段是name:string和default:boolean。在后端，只有数据库中的一条记录可以让default:true.我希望在 Ember js 中的选择中默认选择它。

请给我一个例子如何进行这样的选择和使用它

例子：

name: type1  default: false
name: type2  default: true
name: type3  default: false

我想生成这样的选择：

<selected>
  <option>type1</option
  <option selected=selected>type2</option
  <option>type3</option
</selected>

路由.js

@route 'addincome', { path: 'operations/addincome' }
EmberMoney.AddincomeRoute = Ember.Route.extend
  model: ->
    EmberMoney.IncomeOperation.createRecord()
  setupController: (controller, model) ->
    controller.set('currencies', EmberMoney.Currency.find())
    controller.set('content', model)

addincome.handlebars

// 一些带有收入记录的输出

{{view EmberMoney.Select viewName="select"
                    contentBinding="controller.currencies"
                    optionLabelPath="content.name"
                    optionValuePath="content.id"
                    selectionBinding="controller.defaultType"}}

addincome_controller.js

EmberMoney.AddincomeController = Ember.ObjectController.extend({
  setDefaultCurrency: function(){
    if(this.get('currencies.isLoaded')){
      this.set('defaultType', this.get('currencies').findProperty('default'));
    }
  }.observes('currencies.isLoaded')
})
4

2 回答 2

0

用于selectionBinding选择，并ComputedProperty找到合适的项目

更新

EmberMoney.AddincomeController = Ember.ObjectController.extend({
  setDefaultCurrency: function(){
    if(this.get('currencies.isLoaded')){
      this.set('defaultType', this.get('currencies').findProperty('default'));
    }
  }.observes('currencies.isLoaded')
})

对观察者使用isLoadedover的优点@each是，观察者不会在每次添加货币时被触发，而是确保在加载整个集合后设置值，再次由用例决定何时使用哪个

关于findProperty 的详细信息

希望这可以帮助

截屏 货币列表

于 2013-03-30T10:01:20.890 回答
0

我的答案建立在已经发布的那个之上。答案是使用selectionBindingand 一种巧妙的方式来设置它：

{{view Ember.Select
   contentBinding="controller.types"
   optionLabelPath="content.name"
   optionValuePath="content.id"
   selectionBinding="controller.selectedCurrency"
}}

EmberMoney.IncomesController = Ember.ArrayController.extend({
  selectedCurrency : null,
  currenciesObserver: function(){
    var currencies = this.get("currencies");
    var default = currencies.findProperty("default");
    if(default)
      this.set("selectedCurrency", default);
  }.observes('currencies.@each')
});

解决方案如何工作？

  • 我们在 Select 控件和您的控制器之间设置了一个 selectionBinding（双向）。如果您在控制器中的属性“selectedCurrency”中设置货币，它将是 Select 控件中的选定值。反之亦然，如果您在选择框中选择一种货币，它将在您的控制器中设置。
  • 我在观察者的帮助下进行初始设置。每次观察到的货币数组发生变化时都会调用观察者。
  • 每次调用它时，它都会尝试查找默认货币。如果找到一个，它会将其设置在您的 selectedCurrency 属性中。现在 selectionBinding 启动并为您发挥作用。
  • 此解决方案的另一个优点是，如果用户选择另一种货币，您可以轻松地从属性中获取所选值。
于 2013-03-30T12:58:30.373 回答