백본 Marionette onDomRefresh jquery-ui 다중 발화 클릭

Question

마리오네트 뷰를 정의했으며 모델 변경 이벤트를 반영해야합니다. 나는 그렇게처럼 내 초기화 기능이 있습니다

initialize: function(){ 
    _.bindAll(this,"render"); 
    this.model.on('change',this.render); 
}, 

나중에 내가 onDomRefresh 방법 내 JQuery와 - UI 요소 이니셜 라이저를 정의했습니다. 그것은 드래그 가능하고 크기를 재조정 할 수있는 요소로, 클릭 할 때 쓸 수 있습니다. 요소 외부를 클릭하면 텍스트가 저장됩니다.

onDomRefresh: function(){ 
    var self = this; 
    if(this.$el.resizable()){ 
     this.$el.resizable('destroy'); 
    } 
    this.$el.resizable({ handles: "n, e, s, w, se, sw, nw, ne" }); 
    this.$el.on('resize', function (e) { 
     e.stopPropagation(); 
    }); 

    this.$el.draggable().click(function(e){ 
     $(".selected").removeClass("selected"); 
     $(this).addClass("selected"); 
     $(this).draggable("option", "disabled", true); 
     $(this).attr('contenteditable','true'); 
     $(this).css({cursor:'text'}); 
     $(this).css({opacity:'100'}); 
    }).blur(function(){ 
     $(this).draggable('option', 'disabled', false); 
     $(this).attr('contenteditable','false'); 
     $(this).css({cursor:'move'}); 
     self.textchange(); //update and save the text in the model 
    }); 
} 

모델에서 일부 모델 변경 이벤트가 중첩되어 클릭 기능이 점점 더 많이 발생하면 문제가 발생합니다. 내가 jquery 클릭 이벤트 솔루션을 찾고 있었고, 그들 중 누구도 날 위해 일하는 것 같습니다.

시도 솔루션 :

this.$el.draggable().unbind("click").click(function(e){}); 
this.$el.draggable().off("click").on('click',function(e){}); 
this.$el.draggable().one('click', function(e){}); 
//with jquery sparkle 
this.$el.draggable().once('click', function(e){}); 

또한 때때로 onDomRefresh 방법은 두 번 발사 것을 알 수 있습니다. 그것을 고치는 방법을 모른다. 어떤 아이디어라도 환영받는 것 이상입니다.

Answer 1

나는 요소의 모든 이벤트를 바인드합니다 onDomRefresh() 함수의 beggining에서이 호출을 추가 한 :

this.$el.unbind(); 

이제 클릭 이벤트가 발생 한 번만보기를 다시 렌더링 후.