Question

我花了大约10天的时间来处理一个简单的问题，我可以用Dojo在大约10分钟内解决这个问题。我希望我错过了一些简单的东西 - 我是一个想要使用Ember的菜鸟。

我只是尝试用另一个使用EmberData的Controller的数据填充Ember.Select的内容。考虑这种情况：能够选择FoodGroup作为原料。

似乎很清楚在RawIngredientController和FoodGroupsController之间使用'needs'依赖关系，并绑定内容。

这是我最接近成功的事情，对我来说看起来不够 - 我会解释。

<script type="text/x-handlebars" data-template-name="rawIngredients">

     {{#each item in controller itemController="rawIngredient" }}

            {{! view Ember.Select
                    contentBinding="controllers.foodGroups.content"
                    optionValuePath="content.id"
                    optionLabelPath="content.name"
                    prompt="select Food Group" }}

     {{/each}}
</script>

Cook.RawIngredientController = Ember.ObjectController.extend({
    isEditing: false,
    needs: ['foodGroups'],
    ...
});


Cook.RawIngredient = DS.Model.extend({
    name: DS.attr('string'),
    nameKey: DS.attr('string'),
    foodGroup: DS.belongsTo('Cook.FoodGroup')
});

Cook.FoodGroupsRoute = Ember.Route.extend({
  setupController: function(controller) {
     controller.set('content', Cook.FoodGroup.all());  // have also tried find()
  }
});

Cook.FoodGroup = DS.Model.extend({
    name: DS.attr('string'),
    nameKey: DS.attr('string')
});

这实际上渲染了所有RawIngredients没有错误，但是Selects是空的，因为FoodGroups存储是空的。我可以导航到加载商店的FoodGroups屏幕，返回RawIngredients，并选择使用FoodGroups填充选项。

我在这个问题上看过很多帖子，但是当涉及到EmberData时，没有一个能够充分解决这个问题。有很多后载的例子，比如来自pangratz http://jsfiddle.net/pangratz/hcxrJ/的聪明的例子 - 但我还没有找到任何使用EmberData来懒惰加载内容。

这篇文章非常接近 Ember.js: Ember.Select valueBinding and lazy loading

并包含一个使用观察者的解决方法，我无法工作。我最终绑定到一个从未调用FoodGroup数据实际加载的绑定。这是一个例子，也许不是最好的一个这样的尝试（可能是20 +）：

Cook.FoodGroupsController = Ember.ArrayController.extend({
    ...
       // NOTE: This seems redundant
    values: function() {
        return this.get('content');
    }.property(),
    ...
});

Cook.RawIngredientController = Ember.ObjectController.extend({
    ...
    // this should be the instance; also tried the object name FoodGroupsController....also tried using needs + 'controllers.foodGroups.values' in the binding
    allFoodGroups: Ember.Binding.oneWay('Cook.foodGroupsController.values'),  '

    /*
    //  ... or rather ....??

    allFoodGroups: function() {
        this.get('foodGroupsBinding');
    },
    foodGroupsBinding: "Cook.foodGroupsController.values",
    */

    ...
});

        {{view Ember.Select
                contentBinding="allFoodGroups"
                optionValuePath="content.id"
                optionLabelPath="content.name"
                prompt="select Food Group" }}

但错误地说'allFoodGroups'提供的是Binding而不是Ember.Array。我想我迷失在旋转命名惯例的海洋中。我可以展示我的其他尝试，但都有未定义内容的错误。

唉。所以备份一下......至少使用我原来的解决方案并预装FoodGroups商店应该提供一种解决方法，但是我似乎无法让EmberData以编程方式加载数据。我在RawIngredientController中尝试了一个init（）函数，比如

init: function() {
    var item = this.get('controllers.foodGroups.content.firstObject');
},

但我也没有找到合适的组合。即使我这样做，这似乎是错误的方法，因为这将为每个RawIngredient建立一个引用，而不是使用RawIngredients（或FoodGroups？）中的单个引用 - 但这似乎是一个不同的主题。

这是我尝试描述问题http://jsfiddle.net/jockor/Xphhg/13/

的小提琴

有没有人想出一种有效，有效的方法来加载和使用在其他控制器中定义的存储，使用EmberData来延迟加载相关内容？

Answer 1

您的基本问题似乎是您没有访问foodGroups路由，因此其setupController（）永远不会被执行，因此select控制器的内容永远不会被设置。

在您的示例中，当向相关路线添加链接并单击它时，路线会被初始化并且绑定会起作用。

我尝试更新你的JSFiddle，但它链接到Github的“最新”版本的ember-data，暂时没有更新（你应该自己构建它直到他们正式发布），它也使用旧版本的Ember，所以我得到了一些奇怪的错误。

所以这是一个包含最新Ember和Ember数据的版本：http://jsfiddle.net/tPsp5/

请注意单击“国家/地区”链接时会发生什么。我留下了一些debugger;语句，这些语句可以帮助您理解在什么时候调用的内容。

作为设计说明，您的“父”控制器应该不依赖于“子”控制器。

使用EmberData延迟加载从依赖控制器中选择Ember.Select

1 个答案: