0

以下のようなバックボーンを備えた標準のリストビュー設定があります。アイテムを削除する必要があるインスタンスがあります。これは、モデルを破棄して要素をレンダリング解除する削除関数で行われます。ただし、破棄/レンダリング解除の直前に、リスト内の前の要素を選択したいと思います。

バックボーンでこれを行う良い方法はありますか?今私が考えることができる唯一のことは、いくつかのjQueryでそれを行うことですが、内部的にバックボーン内で前/次へ進む方法があるかどうか知りたいです. または、リスト項目を追加するときに手動で設定する必要がありますか?

App = (function(Backbone, _){
    var Item = Backbone.Model.extend(
    {
        defaults:
        {
            part1: 'hello',
            part2: 'world'
        }
    });

    var ItemList = Backbone.Collection.extend({
        model: Item
    });

    var ListRow = Backbone.View.extend(
    {
        tagName: 'li',

        initialize: function()
        {
            _.bindAll(this, 'render');
        },

        render: function()
        {
            $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');

            return this;
        },

        remove: function()
        {
            //toggle previous element if exists before destory

            $this.model.destroy();
        },

        toggle: function()
        {
            this.$el.addClass('active');            
        }
    });

    var ListView = Backbone.View.extend(
    {
        el: $('#layout_content'),

        events:
        {
            'click button#add': 'addItem'
        },

        initialize: function()
        {
            _.bindAll(this, 'render', 'addItem', 'appendItem');

            this.collection = new TableList();
            this.collection.bind('add', this.appendItem);

            this.counter = 0;
            this.render();
        },

        render: function()
        {
            var self = this;
            $(this.el).append("<button id='add'>Add list item</button>");

            $(this.el).append("<ul></ul>");

            _(this.collection.models).each(function(item){ // in case collection is not empty
                self.appendItem(item);
            }, this);
        },

        addItem: function()
        {
            this.counter++;

            var item = new Item();

            item.set({part2: item.get('part2') + this.counter});

            this.collection.add(item);
        },

        appendItem: function(item)
        {
            var listRow = new ListRow({
                model: item
            });

            $('ul', this.el).append(listRow.render().el);
        }
    });

    var app = function(initialModels)
    {
        this.start = function()
        {
            this.listView = new ListView({collection: new ItemList(initialModels)});
        };
    };

    return app;
})(Backbone, _);


var app = new App([{"id":"95","note_title":"can we find the title"},{"id":"93","note_title":"some title"}]);
app.start();

</p>

4

1 に答える 1

0

これを達成するためのバックボーン内への直接的な方法はないようです。Backbone でこれを実装する方法として、リストビューに追加するときに各 listrowview にインデックス番号を付け、インスタンスをリストビュー内の配列に格納するのが最善だと思います。破棄するときnewindex = indexnumber +/- 1は、新しいインデックスにあるビューを表示してください。

于 2012-06-20T11:02:04.143 に答える