Question

我正在尝试使用li元素创建一个可选视图的应用。该应用程序要求使用单击并拖动界面选择多个元素。因此，我使用Backbone.js来跟踪元素状态和视图，以及选择UI的jQuery UI Selectable。

目前，我所拥有的唯一结构是主应用视图，li元素的模型和视图，以及模型的集合。

构建此方法的最佳方法是什么，以便我的主App视图可以跟踪所选元素并与之交互？

Answer 1

这是我很久以前做过的精简版。它可能对你需要的东西过于复杂，但确实有效。我需要能够以编程方式选择/取消选择项目以及让jQuery可选择处理它，这就是模型具有Selected属性的原因。使用这种方法，您可以执行model.set({Selected:true})，并且所有内容都在UI中保持同步。

添加了jsFiddle来演示它：http://jsfiddle.net/phoenecke/VKRyS/5/

然后在您的应用视图中，您可以执行以下操作：

_.each(collection.where({Selected:true}), function(item){
    // do something with item
});

希望它有所帮助。

ItemView控件：

var ItemView = Backbone.View.extend({

  tagName: "li",

  initialize: function(options) {
     this.listenTo(this.model, 'change:Selected', this.selectedChanged);
  },

  render: function() {
     this.$el.html(template(this.model));
     // add cid as view's id, so it can be found when jQuery-selectable says selection changed (in ListView below).
     this.$el.attr({
        'id': this.model.cid
     });
     this.selectedChanged();
     return this;
  },

  selectedChanged: function() {
     // respond to model's Selected change event.
     // This way, you can programmatically change it, ie. model.set({Selected:true}).
     // but usually this class is already on the view, 
     // since jQuery selectable adds/removes it. it does not hurt to re-add it,
     // but you could check for the class.
     if(this.model.get('Selected')) {
        this.$el.addClass('ui-selected');
     } else {
        this.$el.removeClass('ui-selected');
     }
  }
});

的ListView：

var ListView = Backbone.View.extend({
    initialize: function(options) {
        this.listenTo(this.collection, 'reset', this.render);
        this._views = {};
    },

    render: function() {
        this.collection.each(function(item) {
            var view = new ItemView({model: item});
            this._views[item.cid] = view;
            this.$el.append(view.render().el);
        }, this);
        this.setupSelectable();
    },

    setupSelectable: function() {
        var thisView = this;
        // Set up JQuery UI Selectable
        this.$el.selectable({
            filter: 'li',
            selected: function(event, ui) {
                var cid = ui.selected.id;
                var view = thisView._views[cid];
                if(view) {
                    // I think I only did this stuff to keep the model's Selected 
                    // attribute in sync with the UI. 
                    // this will trigger a redundant call to 'selectedChanged' in the
                    // ItemView, but it has no negative effect.
                    view.model.set({
                        Selected: true
                    });
                }
            },
            unselected: function(event, ui) {
                var cid = ui.unselected.id;
                var view = thisView._views[cid];
                if(view) {
                    view.model.set({
                        Selected: false
                    });
                }
            }
        });
    }
});

将Backbone.js与jQuery UI Selectable集成

1 个答案: