jquery - 将 Backbone.js 与 jQuery UI 集成可选

Question

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

目前，我拥有的唯一结构是主应用程序 View 、li 元素的模型和 View 以及模型的集合。

构造此结构的最佳方法是什么，以便我的主应用程序 View 可以跟踪所选元素并与之交互？

Answer 1

这是我不久前所做的事情的删节版本。对于您的需要来说，它可能过于复杂，但它确实有效。我需要能够以编程方式选择/取消选择项目，并让 jQuery-selectable 处理它，这就是模型具有 Selected 属性的原因。通过这种方法，您可以执行 model.set({Selected:true}) 并且 UI 中的所有内容都保持同步。

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

然后在您的应用程序 View 中，您可以执行以下操作:

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

希望有帮助。

项目 View :

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
                    });
                }
            }
        });
    }
});