使用EmberData填充Ember.Select使用EmberData延遲加載

Question

我花了大約10天時間處理了一個簡單的問題，我可以在10分鐘內用Dojo解決這個問題。我希望我缺少一些簡單的東西 - 我是一個願意使用Ember的小菜鳥。

我只是試圖用另一個控制器中的數據使用EmberData填充Ember.Select的內容。考慮一下這種情況：能夠選擇一種食品組作爲原料。

在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，但選擇是空的，因爲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」是提供一個不綁定的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（）永遠不會被執行，因此選擇控制器的內容永遠不會被設置。

在您的示例中，向有問題的路線添加鏈接並單擊它時，路線被初始化並且綁定工作。

我試圖更新你的JSFiddle，但它連接到Github的最新版本的ember-data，它在一段時間內還沒有被更新（你應該自己構建它，直到他們發佈正式版本），它也使用舊版本的Ember，所以我收到了一些奇怪的錯誤。

因此，這裏是最新的灰燼和灰燼數據版本：http://jsfiddle.net/tPsp5/

注意當你點擊鏈接的國家會發生什麼。我留下了一些debugger;聲明，這些聲明可以幫助您瞭解什麼時候被調用。

---

作爲設計筆記，你的「父母」控制器可能不應該依賴於「子」的控制器。