使用emberjs選擇視圖填充選擇框

我在玩一個玩具應用程序來學習餘燼。我有屬於風格的食譜。樣式只包含一個名稱屬性（以及隱含的ID）。我無法在新模板中設置選擇字段來選擇配方的哪種樣式。使用emberjs選擇視圖填充選擇框

這是我目前有我的路線，控制器和模板：

路線：

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' 
});

模板：

食譜/新形式部分：

<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()和以及在路由的setupController {{view Ember.Select valueBinding='style' name='style' viewName='styleField' contentBinding='styles' optionValuePath='styles.id' optionLabelPath='styles.name'}}

視圖：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和名稱。

來源

2013-03-16 spullen

Ember Select使用optionValuePath和optionLabelPath，看起來您使用的是contentValuePath和contentLabelPath。

這裏有一個例子的jsfiddle：http://jsfiddle.net/nrionfx/BJwLR/2/

從燼文檔：http://emberjs.com/api/classes/Ember.Select.html

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

來源

2013-03-16 13:16:57 nrion

啊，謝謝，看起來像我是在正確的道路上剛剛我的命名約定搞砸了。 – spullen 2013-03-16 14:44:03

使用emberjs選擇視圖填充選擇框

回答

相關問題