1. 首頁
  2. 問答
  3. 如何在用戶點擊div之外時在Backbone中隱藏div？

如何在用戶點擊div之外時在Backbone中隱藏div？

2012-10-19 59 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; 
}

如果你只想隱藏<div>，而不是將其刪除，只是<body>點擊綁定比remove不同的方法;您仍然想要從remove中的<body>中刪除點擊處理程序。此外，您還需要在視圖的el上鎖定點擊事件，以防止它們進入<body>。

演示：http://jsfiddle.net/ambiguous/R698h/

如果您有關心的單擊事件等元素，那麼你可以絕對地定位<div>來掩蓋<body>，然後你的點擊處理程序綁定到這一點。你可以看看jQuery BlockUI插件，看看這是如何完成的。

來源

2012-10-20 02:24:52

0

如果您使用的原型，你可以這樣做：

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

我用jQuery想這可能是這樣的：

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到內部視圖內聽外的意見點擊事件然後如你所願操縱它。

我還建議檢查這個不錯的article關於使用Backbone的常見錯誤。他們中有些人有密切的關係你的問題：

來源

2017-02-24 14:06:36

相關問題

 相關問題