javascript - 在主干 View 中访问 el 外部的点击事件

Question

如何在 el 范围之外访问点击事件。

我有什么:HTML :

<div class="right_btn"></div>
<div id="template_loader">
    <!-- HTML template goes here which contain form inputs-->
    <input type="text" class="forgot_password_email" name="forgot_password_email"/>
</div>

查看:

var ForgotPasswordView = Backbone.View.extend({
    el: "#template_loader",
    initialize: function () {
        console.log('Forgot Password View Initialized');
    },
    render: function () {
        blockPage();
        var that = this;  

        $.get(App.baseUrl + 'templates/forgot-password-view.html', function (data) {
            template = _.template(data, { });
            that.$el.html(template);
            unblockPage();
        }, 'html'); 
    },
    events:{
        'click .right_btn':'forgotPasswordSubmit', //Doesn't fire as its outside of el
    }, 
    forgotPasswordSubmit: function(e){
        alert($(".forgot_password_email").val());
        e.preventDefault();
    }
});

我经历了以下:

Backbone.js views - binding event to element outside of "el"

Howto bind a click event in a Backbone subview

但并不能真正帮助我让它发挥作用。

如何在 View 中获取 .right_btn 的点击事件。我无法更改模板结构以将 right_btn 包含在 el 中。在这里无论如何绑定(bind)外部元素或识别主干 View 本身内部的点击事件。

Answer 1

不幸的是，仅使用主干库无法做到这一点。 Backbone 期望 View 仅处理其特定 DOM 元素内的事件。

如果可能的话，最好重构您的代码，这样您就不必打破这些约定。如果您以后需要重新定位 View 并且它依赖于它的父环境，那么模糊 View 的边界会给您带来困难。

如果可能，创建一个包含上面列出的 HTML 的父 View ，并使用该 View 绑定(bind)到事件并提交其 subview 的表单。

如果您别无选择，只能采用这种方式，那么我建议您使用 jQuery 'on' 来绑定(bind)事件。

// Put this in your view to ensure that it is only bound when the form is
// added to the page. You could substitute 'on' for 'one' if you don't want
// the binding to maintain after the first submission.
var submitForm = function(){
  $('#template_loader form').submit();
};
$('.right_button').on('click', submitForm);