ruby-on-rails - 如何通过 Rails 后端数据填充 Ember.Select？

Question

我正在尝试基于 Rails 后端在 Ember 中编写一个选择框。编辑模型食谱时，我希望能够从下拉列表中的源列表中进行选择。现在在 Ember 中，由于以下代码，我收到消息“#each 循环的值必须是一个数组。您通过了 App.Sources”。

我已经测试了 REST api，它可以正确地为 Recipes 和 Sources 提供响应。

我是 Embers 的新手(实际上也是 Javascript!)，我觉得我缺少一些基本的东西。感谢您提供任何提示。

这是我的 JS:

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

这是 View :

{{view Ember.Select
         contentBinding="controllers.sources.content"
         optionLabelPath="content.title"
         optionValuePath="content.id"}}

更新这是 JSON:

{
    "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
        }
    ]
}

Answer 1

欢迎使用 javacript/ember，这里是一个使用 select 的例子。

http://emberjs.jsbin.com/OxIDiVU/69/edit

你会注意到我不引用真实属性，而是引用字符串

{{ view Ember.Select
      content=someSource
      optionValuePath='content.id'
      optionLabelPath='content.title'
 }}

此外，这似乎是一个非常旧的 Ember Data 版本。你可以考虑更新。 https://github.com/emberjs/data/blob/master/TRANSITION.md

您的路由可以在一次调用中进行

App.Router.map(function() {
  this.resource("recipes");
  this.resource("recipe", { path: "recipes/:recipe_id"}, function(){
    this.route('edit');
  });
});

这应该让你开始

http://emberjs.jsbin.com/OxIDiVU/74/edit