Question

我有一个带有主干的标准列表视图设置，如下所示。我有一个实例，我需要删除一个项目，这是在一个删除函数中完成的，该函数会破坏模型并取消元素。然而，在destroy / unrender之前，我想选择列表中的前一个元素。

在骨干网中有没有一种很好的方法可以做到这一点，现在我唯一能想到的就是用一些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();

Answer 1

在骨干内部似乎没有直接的方法来实现这一目标。我认为，在Backbone中实现这一点的最佳方法是，在将每个listrowview添加到listview并将实例存储在listview中的数组中时，为每个listrowview提供一个索引号。在销毁时只需转到newindex = indexnumber +/- 1，然后显示驻留在新索引中的视图。

Backbone获取删除上一个/下一个项目？

1 个答案: