3

私は、ember を使用して単純なカテゴリ ブラウザーを構築しようとしています。私は2つの非常に単純なビューを持っています。ユーザーがアクセス/すると、すべてのカテゴリのリストが表示され、そのリスト内のカテゴリをクリックする#/10と、ID が 10 の場所に移動します。

/私の問題は、ユーザーがルートのカテゴリをクリックすると、次のエラーが発生することです

TypeError: arrangedContent.addArrayObserver is not a function
[Break On This Error]   

didChange: 'arrangedContentArrayDidChange'

ルートでページを更新する#/10と、バックエンドに対して適切な API 呼び出しが行われます/api/categories?parent=99。移行中にこのエラーをスローしている何が間違っている可能性がありますか? 私のコードの完全な例を以下に示します。

テンプレート:

<script type="text/x-handlebars">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="categories">
    {{#each category in controller}}
        <p>{{#linkTo 'category' category}}{{ category.name }}{{/linkTo}}</p>
    {{/each}}
</script>

<!--this is an array instead of object -->
<script type="text/x-handlebars" data-template-name="category">
    {{#each category in controller}}
        <p>{{category.name}}</p>
    {{/each}}
</script>

Javascript:

var App = Ember.Application.create();

App.Router.map(function(){
    this.resource('categories', { path : '/' });
    this.resource('category', { path : '/:category_id' });
});

App.CategoriesRoute = Ember.Route.extend({
    model: function(){
        return App.Category.find();
    }
});

//this is causing the error possibly
    App.CategoryRoute = Ember.Route.extend({
        model: function(params){
            return App.Category.find({parent: params.category_id});
        }
    });

App.CategoryController = Ember.ArrayController.extend();

// Models
App.Store = DS.Store.extend({
  revision: 11,
  adapter: 'DS.RESTAdapter'
});

DS.RESTAdapter.configure("plurals", {
  category: "categories"
});

App.Category = DS.Model.extend({
  name: DS.attr('string'),
  parent_id: DS.attr('number')
});

デバッグ情報：

DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.0
4

2 に答える 2

4

ヒント:これを書いた後、モデル フックを正しく理解していない可能性があることに気付きました。このフックは、URL 経由でアプリに入るときに呼び出されます。URL を適切なモデルに変換し、このモデルでルートに遷移します。この model() フックが {{#linkTo}} の引数で呼び出されると思ったのでしょうか? これはそうではありません！

テンプレートの #linkTo ヘルパーに単一のモデルを渡しているため、これは機能しません。そのため、Ember はこの単一のオブジェクトを ArrayController のコンテンツとして設定したいと考えています。これにより、エラーが発生します。モデルフックは配列を返します。経験則: モデル フックで返す同じデータ構造を常に #linkTo に渡す必要があります。

したがって、linkTo の代わりにイベントを使用して、次のことを行うことをお勧めします。

<script type="text/x-handlebars" data-template-name="categories">
    {{#each category in controller}}
        <p {{action 'showParentCategory' category}}>{{category.name}}</p>
    {{/each}}
</script>

App.CategoriesRoute = Ember.Route.extend({
    model: function(){
        return App.Category.find();
    },
    events: {
      showParentCategory : function(parentCategory){
        var cats = App.Category.find({parent: parentCategory.get("category_id")});
        this.transitionTo("category", cats);
      }
    }
});

私はここで何をしましたか？

  1. 「showParentCategory」というアクションを作成しました。
  2. これはルーティングに関するアクションであるため、CategoriesRoute でこのイベントを処理しています。ご覧のとおり、イベント/アクション ハンドラーはルートの events プロパティで宣言されています。
  3. 私はあなたのモデルフックと同じロジックをそこで実行しており、フェッチされたカテゴリでtransitinToを手動で呼び出しています。

更新: シリアル化する方法 シリアル化 を実装することにより、URL に何を入れるかを Ember に伝えます。

App.CategoryRoute = Ember.Route.extend({
    model: function(params){
        return App.Category.find({parent: params.category_id});
    },
    serialize : function(models){
        var first = models.objectAt(0);
        return {
            category_id : first.get("parentId")
        }
    }
});
于 2013-03-11T15:54:11.383 に答える
0

テンプレート内の配列コンテンツに対して行うのではなく、数値に対して #each を行うと、この問題が発生します。

「投票」モデルに数値カウントがありました。私は次のように繰り返していました、

{{#content.count の各投票}} {{/each}}

#each は ember 配列でのみ使用する必要があると思います。

于 2015-12-17T09:16:50.487 に答える