Backbone.js와 jQuery UI 선택 가능

Question

li 요소를 선택 가능한보기로 사용하여 앱을 만들려고합니다. 이 앱에서는 클릭 앤 드래그 인터페이스를 사용하여 여러 요소를 선택해야합니다. 이 때문에 Backbone.js를 사용하여 요소 상태 및 뷰를 추적하고 jQuery UI를 선택 UI에 맞게 선택할 수 있습니다.

현재 유일한 구조는 기본 앱보기, li 요소에 대한 모델 및보기 및 모델에 대한 컬렉션입니다.

기본 앱보기에서 선택한 요소를 추적하고 상호 작용할 수 있도록 가장 좋은 방법은 무엇입니까?

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