Databases
StackOverflow2013
Postsdbo
POpopulating select box using emberjs select view
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POpopulating select box using emberjs select view
    text
    copied!<p>I working on a toy app to learn ember. I have recipes that belong to styles. A style just consists of a name attribute (and the implicit id as well). I am having trouble setting up a select field in the new template to select which style the recipe is.</p> <p>Here's what I currently have for my routes, controllers and templates:</p> <p>Routes:</p> <pre><code>App.RecipesNewRoute = Ember.Route.extend({ model: function() { return App.Recipe.createRecord({ title: '', description: '', instructions: '' }); }, setupController: function(controller, model) { controller.set('content', model); } }); </code></pre> <p>Controllers:</p> <pre><code>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' }); </code></pre> <p>Templates:</p> <p>recipes/new and form partial:</p> <pre><code>&lt;script type="text/x-handlebars" data-template-name="recipes/new"&gt; {{ partial 'recipes/form' }} &lt;/script&gt; &lt;script type="text/x-handlebars" data-template-name="recipes/_form"&gt; {{ title }} &lt;form&gt; &lt;fieldset&gt; &lt;div&gt; &lt;label {{bindAttr for="titleField.elementId"}}&gt;Title&lt;/label&gt; {{view Ember.TextField valueBinding='title' name='title' viewName='titleField'}} &lt;/div&gt; &lt;div&gt; &lt;label&gt;Style&lt;/label&gt; {{view Ember.Select valueBinding='style' name='style' viewName='styleField' contentBinding='App.Style.find()'}} &lt;/div&gt; &lt;div&gt; &lt;label {{bindAttr for='descriptionField.elementId'}}&gt;Description&lt;/label&gt; {{view Ember.TextArea valueBinding='description' name='description' viewName='descriptionField'}} &lt;/div&gt; &lt;div&gt; &lt;label {{bindAttr for='instructionsField.elementId'}}&gt;Instructions&lt;/label&gt; {{view Ember.TextArea valueBinding='instructions' name='instructions' viewName='instructionsField'}} &lt;/div&gt; &lt;a href='#' {{action create target='controller'}}&gt;{{buttonTitle}}&lt;/a&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;a href='#' {{action cancel target='controller'}}&gt;Cancel&lt;/a&gt; &lt;/script&gt; </code></pre> <p>The main takeaway being: <code>{{view Ember.Select valueBinding='style' name='style' viewName='styleField' contentBinding='App.Style.find()'}}</code></p> <p>I've also tried setting up a styles variable in the controller: In RecipesNewController: <code>styles: App.Style.find()</code> and in the view <code>{{view Ember.Select valueBinding='style' name='style' viewName='styleField' contentBinding='styles' optionValuePath='styles.id' optionLabelPath='styles.name'}}</code></p> <p>as well as in the route's setupController: <code>controller.set('styles', App.Style.find())</code> (with the same view code as with setting it in the controller).</p> <p>Any help would be great, I'm sure it's something simple.</p> <p>Thanks</p> <p><strong>Update</strong></p> <p>So I think I've almost got it.</p> <p>In my RecipesNewRoute's setupController I have <code>controller.set('styles', App.Style.find());</code>. Then in my view I have <code>{{view Ember.Select valueBinding='style' name='style' viewName='styleField' contentBinding='controller.styles' contentValuePath='content.id' contentLabelPath='content.name'}}</code>. Now my problem is I have the select box being populated, except the label and value are set to <code>&lt;App.Style:ember407:100&gt;</code> instead of the id and the name. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload