Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do get an Ember.Select to be populated via Rails backend data?
    primarykey
    data
    text
    <p>I'm trying to write a select box in Ember, based on a Rails back end. When editing the model Recipes, I want to be able to select from a list of Sources in a dropdown. Right now in Ember I'm getting the message "The value that #each loops over must be an Array. You passed App.Sources" as a result of the following code.</p> <p>I have tested the REST api and it is providing the response for Recipes and Sources both properly.</p> <p>I'm new to Embers (and Javascript too, actually!) and I feel like I'm missing something basic. Thank you for any tips.</p> <p>Here's my JS:</p> <pre><code>App.RecipeEditController = Ember.ObjectController.extend({ needs: ['sources'], selectedSource: null, actions: { save: function() { var recipe = this.get('model'); // this will tell Ember-Data to save/persist the new record recipe.save(); // then transition to the current recipe this.transitionToRoute('recipe', recipe); } } }); App.RecipesRoute = Ember.Route.extend({ model: function() { return this.store.find('recipe'); }, setupController: function(controller, model) { this._super(controller, model); this.controllerFor('sources').set('content', this.store.find('source')); } }); App.SourcesRoute = Ember.Route.extend({ model: function() { return this.store.find('source'); } }); DS.RESTAdapter.reopen({ namespace: "api/v1" }); App.Recipe = DS.Model.extend({ title: DS.attr('string'), url: DS.attr('string'), rating: DS.attr('number'), source: DS.belongsTo('source', { async: true }), page_number: DS.attr('number'), want_to_make: DS.attr('boolean'), favorite: DS.attr('boolean') }); App.Source = DS.Model.extend({ title: DS.attr('string'), authorLast: DS.attr('string'), recipes: DS.hasMany('recipe', { async: true }) }); App.Router.map(function() { return this.resource("recipes"); }); App.Router.map(function() { return this.resource("recipe", { path: "recipes/:recipe_id" }); }); App.Router.map(function() { return this.resource("recipeEdit", { path: "recipes/:recipe_id/edit" }); }); App.Store = DS.Store.extend({ revision: 11, adapter: DS.RESTAdapter }); </code></pre> <p>And here's the view:</p> <pre><code>{{view Ember.Select contentBinding="controllers.sources.content" optionLabelPath="content.title" optionValuePath="content.id"}} </code></pre> <p>UPDATE And here's the JSON:</p> <pre><code>{ "recipes": [ { "id": 3, "title": "Did this make it through?", "url": "www.hellyeahitdid.com/high-five/", "rating": null, "source_id": null, "page_number": null, "want_to_make": false, "favorite": false }, { "id": 1, "title": "Here's another totally crazy one for ya", "url": "http://www.example.com/recipe/1", "rating": null, "source_id": null, "page_number": null, "want_to_make": false, "favorite": false }, { "id": 2, "title": "A Sample Recipe", "url": "http://www.example.com/recipe/1", "rating": null, "source_id": null, "page_number": null, "want_to_make": false, "favorite": false } ] } { "sources": [ { "id": 1, "title": "Joy of Cooking", "author_last": null }, { "id": 2, "title": "Everyday Food", "author_last": null } ] } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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