使用 emberjs 选择视图填充选择框答案

【问题标题】：populating select box using emberjs select view使用 emberjs 选择视图填充选择框
【发布时间】：2013-03-16 00:48:54
【问题描述】：

我正在开发一个玩具应用程序来学习 ember。我有属于风格的食谱。样式只包含一个名称属性（以及隐含的 id）。我在新模板中设置选择字段以选择配方的样式时遇到问题。

以下是我目前的路线、控制器和模板：

路线：

App.RecipesNewRoute = Ember.Route.extend({
  model: function() {
    return App.Recipe.createRecord({
      title: '',
      description: '',
      instructions: ''
    });
  },
  setupController: function(controller, model) {
    controller.set('content', model);
  }
});

控制器：

App.RecipesController = Ember.ArrayController.extend({});

App.RecipesNewController = Ember.ObjectController.extend({
  create: function() {
    this.transitionToRoute('recipes.show', this.content);
  },

  cancel: function() {
    this.content.deleteRecord();
    this.transitionToRoute('recipes.index');
  },

  buttonTitle: 'Add Beer Recipe'
});

模板：

recipes/new 和 form partial：

<script type="text/x-handlebars" data-template-name="recipes/new">
  {{ partial 'recipes/form' }}
</script>

<script type="text/x-handlebars" data-template-name="recipes/_form">
  {{ title }}
  <form>
    <fieldset>
      <div>
        <label {{bindAttr for="titleField.elementId"}}>Title</label>
        {{view Ember.TextField valueBinding='title' name='title' viewName='titleField'}}
      </div>
      <div>
        <label>Style</label>
        {{view Ember.Select valueBinding='style' name='style' viewName='styleField' contentBinding='App.Style.find()'}}
      </div>
      <div>
        <label {{bindAttr for='descriptionField.elementId'}}>Description</label>
        {{view Ember.TextArea valueBinding='description' name='description' viewName='descriptionField'}}
      </div>
      <div>
        <label {{bindAttr for='instructionsField.elementId'}}>Instructions</label>
        {{view Ember.TextArea valueBinding='instructions' name='instructions' viewName='instructionsField'}}
      </div>
      <a href='#' {{action create target='controller'}}>{{buttonTitle}}</a>
    </fieldset>
  </form>

  <a href='#' {{action cancel target='controller'}}>Cancel</a>
</script>

主要内容是：{{view Ember.Select valueBinding='style' name='style' viewName='styleField' contentBinding='App.Style.find()'}}

我还尝试在控制器中设置样式变量：在 RecipesNewController 中：styles: App.Style.find() 和视图中 {{view Ember.Select valueBinding='style' name='style' viewName='styleField' contentBinding='styles' optionValuePath='styles.id' optionLabelPath='styles.name'}}

以及在路由的 setupController 中：controller.set('styles', App.Style.find())（与在控制器中设置相同的视图代码）。

任何帮助都会很棒，我相信这很简单。

谢谢

更新

所以我想我差不多了。

在我的 RecipesNewRoute 的 setupController 中，我有 controller.set('styles', App.Style.find());。然后在我看来我有{{view Ember.Select valueBinding='style' name='style' viewName='styleField' contentBinding='controller.styles' contentValuePath='content.id' contentLabelPath='content.name'}}。现在我的问题是我填充了选择框，除了标签和值设置为 <App.Style:ember407:100> 而不是 id 和名称。

【问题讨论】：

标签： javascript templates ember.js views ember-data

【解决方案1】：

Ember Select 使用 optionValuePath 和 optionLabelPath，看起来您正在使用 contentValuePath 和 contentLabelPath。

这里有一个 jsFiddle 示例：http://jsfiddle.net/nrionfx/BJwLR/2/

来自 ember 文档：http://emberjs.com/api/classes/Ember.Select.html

{{view Ember.Select
       contentBinding="App.programmers"
       optionValuePath="content.id"
       optionLabelPath="content.firstName"}}

【讨论】：

啊，谢谢，看来我走在正确的道路上，只是我的命名约定搞砸了。