1. 홈
  2. 질의 응답
  3. 사용자가 div 외부를 클릭 할 때 백본에서 div를 숨기는 방법은 무엇입니까?

사용자가 div 외부를 클릭 할 때 백본에서 div를 숨기는 방법은 무엇입니까?

2012-10-19 2 views

답변

3

일반적으로 클릭 핸들러를 <body>에 직접 연결 한 다음 <div>을 닫거나 숨 깁니다. 예를 들면 :

render: function() { 
    $('body').on('click', this.remove); 
    this.$el.html('<div id="d"></div>'); 
    return this; 
}, 
remove: function() { 
    $('body').off('click', this.remove); 
    // This is what the default `remove` does. 
    this.$el.remove(); 
    return this; 
}

그냥이 아니라 단지 remove가 아닌 다른 방법으로 <body>에 클릭을 결합, 제거보다 <div>을 숨기려면; 그래도 remove에서 <body>의 클릭 핸들러를 삭제하려고합니다. 또한보기의 el에서 클릭 이벤트를 트랩하여 <body>에 머물지 않도록해야합니다.

데모 : http://jsfiddle.net/ambiguous/R698h/

당신은 클릭 이벤트에 대한 관심이 다른 요소를 가지고 있다면 당신은 절대적으로 <body>을 은폐하고 그에 클릭 핸들러를 결합하는 <div>를 배치 할 수있다. 플러그인이 어떻게 수행되는지 보려면 jQuery BlockUI 플러그인을 살펴보세요. 당신이 프로토 타입을 사용하는 경우

출처

2012-10-20 02:24:52

0

, 당신은이 작업을 수행 할 수 있습니다 : 나는 다음과 같을 수 jQuery를 함께 생각

initialize: function() { 
    // some code 
    document.on('click', function(e, target) { 
    if (target !== this.el && target.up('#inner_div').length === 0) { 
     this.remove(); 
    } 
    }.bind(this)); 
}

을 :

initialize: function() { 
    // some code 
    $(document).on('click', function(e) { 
    if (e.target !== this.el && e.target.parent('#inner_div').length === 0) { 
     this.remove(); 
    } 
    }.bind(this)); 
}

출처

2012-10-23 06:43:38

0

DOM을 조작하는 것은 바로 당신이 백본 핸들 일을 할 수있는 작동하지만 당신의 견해를 적절한 구조로 제공함으로써 당신을 위해. 예를 들면 다음과 같습니다.

BoxView = Backbone.View.extend({ 
    events: { 
    'click': '_click' 
    }, 

    _click: function() { 
    return false; 
    } 
}); 

AppView = Backbone.View.extend({ 
    el: '.app', 

    initialize: function() { 
    this.boxView = new BoxView({ el: $('.box') }) 
    }, 

    events: { 
    'click': '_click' 
    }, 

    _click: function() { 
    this.boxView.remove(); 
    } 
}); 

new AppView({ el: $('.app') });

이렇게하면 외부보기에서 클릭이 발생하면 내부보기를 변경할 수 있습니다. BoxView click 이벤트의 바인딩을 확인하여 사용자가 클릭 할 때 해당 이벤트가 삭제되지 않도록하십시오.

데모 : https://jsfiddle.net/embs/45da2ppm/

경우 이미 쉽게 파단 구조로 리팩토링 할 수없는 백본 뷰의 복잡한 구조를 가지고, 당신은 여전히 ​​Backbone.Events module의 사용은 내부 뷰 내에서 외부보기 '클릭 이벤트를 수신 할 수 있도록 할 수 있습니다 그런 다음 원하는대로 조작하십시오.

Backbone으로 작업 할 때 자주 발생하는 실수에 대해서는이 article을 확인하는 것이 좋습니다. 그들 중 일부는 밀접하게 귀하의 질문에 관련이 있습니다

출처

2017-02-24 14:06:36

관련 문제

 관련 문제