0

Dojo を使えば約 10 分で解決できたはずの単純な問題に、約 10 日間を費やしました。簡単なものが欠けていることを願っています-私はEmberを使いたい初心者です。

EmberData を使用して、別の Controller からのデータを Ember.Select のコンテンツに入力しようとしているだけです。例を考えてみましょう: Raw Ingredient の FoodGroup を選択できる場合。

RawIngredientController と FoodGroupsController の間で「ニーズ」依存関係を使用し、コンテンツにバインドすることは明らかです。

これは私が成功に最も近いものであり、私には十分に見えません - 説明します.

<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 ストアが空であるため、Selects は空です。ストアを読み込む FoodGroups 画面に移動し、RawIngredients に戻ると、選択内容に FoodGroups が入力されます。

この問題に関する多くの投稿を見てきましたが、EmberData が関係している場合、この問題に十分に対処しているものはありません。pangratz http://jsfiddle.net/pangratz/hcxrJ/のこの巧妙な例のように、ポストロードの例はたくさんありますが 、コンテンツを遅延ロードするために EmberData を使用する例は見つかりませんでした。

この投稿は 、Ember.js: Ember.Select valueBinding と遅延読み込みにかなり近いものです。

オブザーバーを使用した回避策が含まれていますが、これは機能しませんでした。私は、FoodGroup データの実際の読み込みを決して呼び出さないバインディングにバインドすることになりました。以下は、そのような試みの 1 つ (おそらく 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');
},

しかし、そこにも正しい組み合わせが見つかりませんでした。そして、私がそうしても、RawIngredients（またはFoodGroups？）からの単一の参照を使用するのではなく、RawIngredientごとに参照を設定するため、間違ったアプローチのように思えますが、それは別のトピックのようです.

これは、問題を説明するフィドルでの私の試みですhttp://jsfiddle.net/jockor/Xphhg/13/

関連するコンテンツを遅延ロードするために EmberData を使用して、他のコントローラーで定義されたストアをロードして使用する効率的で効果的な方法を見つけた人はいますか?

4

1 に答える 1