0

私はバックボーンを使い始めましたが、コンパレータ駆動の並べ替えを機能させるのに問題があります。ページのナビゲーション メニューに入力するために使用している単純なコレクションがあります。MongoDB バックエンドから入力されています。

window.navItem = Backbone.Model.extend({
    initialize: function(){
        return {
            "title": "no title",
            "href": "",
            "class": "",
            "style": "",
            "position": -1,
            "showLog": false,
            "showUnlog": false
        }
    },
});

window.navList = Backbone.Collection.extend({
    url: "../nav",
    initialize: function(){        
    },        
    model: navItem,
    comparator: function(iNavItem){
        return iNavItem.position;
    },
});

View コードを含めるための編集: window.loggedIn 変数の状態を変更して、showLog/showUnLog プロパティに基づいて View メンバーを表示/マスクするためのロジックを持つ単なるスケルトン。

window.navView = Backbone.View.extend({
    el: $('#navBar'),
    initialize: function(){
        var self = this;
        this.model.bind("reset", this.render, this);
        this.navTemplate = Handlebars.compile($("#navListTemplate").html());
    },
    events: {
        "click #navLogIn"       : "navLogIn",
        "click #navLogOut"      : "navLogOut"
    },
    render: function() {
        this.json = _.where(this.model.toJSON(), 
            {showUnlog:(!window.loggedIn),
            showLog:(window.loggedIn)});
        $(this.el).html( this.navTemplate(this.json));
        return this;
    },
    navLogIn: function() {
        window.loggedIn = !window.loggedIn;
        this.render();
    },
    navLogOut: function() {
        window.loggedIn = !window.loggedIn;
        this.render();          
    }
});

メニューが読み込まれ、コレクションが「位置」でソートされていないことを除いて、すべてが正常に機能しているように見えます。ナビゲーション メニューの 2 番目のスロットにあるはずのメニュー項目が 1 つありますが、MongoDB での編集のためにコレクションの最後にあります。「位置」の値は 2 番目に並べ替える必要がありますが、一貫してメニューの最後に表示されます。

サーバーから送信される JSON は次のとおりです。

[{
    "_id": "50f6fe449f92f91bc1fcbcf6",
    "title": "Account",
    "href": "",
    "htmlId": "",
    "class": "nav-header",
    "style": "",
    "position": 0,
    "showLog": true,
    "showUnlog": true
},
{
    "_id": "50f6fe449f92f91bc1fcbcf7",
    "title": "Log In",
    "href": "#",
    "htmlId": "navLogIn",
    "class": "",
    "style": "",
    "position": 10,
    "showLog": false,
    "showUnlog": true
},
{
    "_id": "50f6fe449f92f91bc1fcbcf8",
    "title": "New Account",
    "href": "#",
    "htmlId": "",
    "class": "",
    "style": "",
    "position": 20,
    "showLog": false,
    "showUnlog": true
},

をちょきちょきと切る...

この最後のアイテムは適切な位置に並べ替えられておらず、代わりに最後に表示されます...

{
    "_id": "50f6fe449f92f91bc1fcbcf9",
    "class": "",
    "href": "#",
    "htmlId": "navLogOut",
    "position": 10,
    "showLog": true,
    "showUnlog": false,
    "style": "",
    "title": "Log Out"
}]

theNavList.pluck('position') (theNavList は navList のインスタンス化されたコピーです) を呼び出すと、[0, 10, 20, 20, 30, 40, 50, 60, 70, 80, 90, 10] が得られます。

Firefox のコレクションで .sort() 関数を手動で起動しようとしましたが、表示されたメニューでもコレクション自体でも、コレクションのモデルの順序を修正できません。

ここで非常に単純なものが欠けているように感じます。

4

1 に答える 1

1

あなたは聞き逃しているだけです。

あなたが見たいと思うかもしれないまさにこのトピックに関する議論があります：

簡単に言えば、ユーザーが「X でソート」を選択すると、次のことができるということです。

  1. コレクションにコンパレータ機能を設定する
  2. コレクションの並べ替え関数を呼び出します (リセット イベントをトリガーします)。
  3. ビューでリセット イベントをリッスンし、(クリアして) アイテムを再描画します。

ステップ 1 と 2 を処理する別の方法は、コレクションの sortBy メソッドを呼び出す独自のメソッドを作成し、ビューがリッスンできるカスタム イベントをトリガーすることです。

しかし、ビューを並べ替えてコレクションの並べ替え順序と同期させるには、クリアと再描画が最も簡単な (そしておそらく最も速い) 方法であるようです。

于 2013-01-16T21:49:56.267 に答える