백본 jqueryUI 컬렉션 업데이트

Question

필자는 요소를 클릭하면 draggable 및 resizable div에 내 페이지를 추가하고 컬렉션에 요소를 삽입하는 requirejs 및 백본에 응용 프로그램이 있습니다. 크기를 조정하거나 요소를 드래그하면 div 또는 height와 같은 새로운 값을 갖는 요소의 데이터를 업로드하려고합니다. 가능하니?

내 생각은 무엇입니까?

define(['jquery' , 
     'backbone', 
     'jquery_ui', 
     'models/design', 
     'collections/design', 
     'views/element', 
     "text!templates/design.html" 
     ], 
    function($, Backbone, jQueryUI, DesignModel, DesignCollection, ElementView, tmplDesign){ 
    var DesignView = Backbone.View.extend({ 
     initialize: function(){ 
      this.$el = $('#layout'); 
      this.template = tmplDesign; 
      console.log('initialize DesignView'); 
      this.collection = new DesignCollection(); 
      var here = this; 
      $('#insert-dynamic-element').click(function(){ 
          //json to the collection with data t update 
       var element = { name:'img', type:'image', width:'100px', height:'50px' }; 
       here.collection.addElement(element); 
       here.render(); 
       $(function() { 
        $('.drag-item').draggable({ 
         snap  : true, 
         cursor  : "move", 
         delay  : 100, 
         scroll  : false, 
         containment : "parent" 
        }).resizable({ 
         containment : "parent", 
         stop: function(e, ui) { 
          var width = ui.size.width; 
          var height = ui.size.height; 
             //I want update this value of width and height into the collection 
         } 
        }); 
       }); 
      }); 
     }, 
     render: function(){ 
      var template = _.template(this.template, {elements:this.collection.toJSON()}); 
      this.$el.empty(); 
      this.$el.append(template); 
     } 
    }) 

    return DesignView; 
}); 

Answer 1

이벤트는 백본 모델 또는 컬렉션으로 설정했기 때문에 할 수 있습니다.

Collections은 you are adding a JSON 개체를 컬렉션 instead of a Model에 게시 한 예인 Models의 목록입니다.

예를 들어, 모든 Design에 대한보기 인스턴스로 작업하기를 원한다고 가정합니다. 따라서 이것이 initialize 메소드 내부의 모든 것을 수행하는 이유입니다.

이 경우 일 수도 있고 parent view 일 수도 있습니다.이 경우 여기서는 하나의 개체로 작업하기 때문에 여기에 Model 만 있어야합니다. 당신이 다른보기 인스턴스를 원한다면, 그래서 기본적으로

var DesignView = Backbone.View.extend({ 
    initialize: function(){ 
     this.$el = $('#layout'); 
     this.template = tmplDesign; 
     console.log('initialize DesignView'); 

     // this should be in a parent view 
     // this.ParentView.collection = new DesignCollection(); 
     // this.ParentView.listenTo(this.ParentView.collection, 'change', this.ParentView.saveDataToServer); 

     this.elementModel = null; 
     var here = this; 
     $('#insert-dynamic-element').click(function(){ 
         //json to the collection with data t update 
      var element = { designId:here.ParentView.collection.models.length, name:'img', type:'image', width:'100px', height:'50px' }; 
      here.elementModel = new DesignModel(element); 
      here.ParentView.collection.addElement(elementModel); 
      here.render(); 

     }); 
    }, 
    render: function(){ 
     var template = _.template(this.template, {here.ParentView.collection.at(here.ParentView.collection.model.length-1).toJSON()}); 
     this.$el.empty(); 
     this.$el.append(template); 
     var here = this; 
     $('.drag-item').draggable({ 
      snap  : true, 
      cursor  : "move", 
      delay  : 100, 
      scroll  : false, 
      containment : "parent" 
     }).resizable({ 
      containment : "parent", 
      stop: function(e, ui) { 
       var width = ui.size.width; 
       var height = ui.size.height; 
       elementModel.set({ width:ui.size.width, height.size.height}); 
       here.ParentView.collection.set(elementModel, {remove:false}); 
      } 
     }); 
    } 
}); 

난 당신이 콜렉션의 관리 부모 뷰를 사용하는 것이 좋습니다 모든 모델 :

음, 어쩌면 당신이 뭔가를 할 수 있습니다.