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

但并没有真正帮助我开始工作。

如何在视图中获得.right_btn的点击事件。我无法更改模板结构以在right_btn中包含el。无论如何，在这里绑定外部元素或识别骨干视图本身内的click事件。

Answer 1

不幸的是，没有办法只使用骨干库这样做。 Backbone希望视图只处理其特定DOM元素中的事件。

如果可能的话，最好重构您的代码，这样您就不必违反这些约定。如果您需要重新定位视图并且它依赖于它的父环境，那么模糊视图的边界可能会在以后遇到困难。

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

如果你别无选择，只能这样做，那么我建议使用jQuery'on'来绑定事件。

// 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);

Answer 2

实际上有一种方法：

以下是具有主模板的原始视图，在元素template_loader中，forgetpassword模板是渲染器。按钮right_btn位于元素范围之外，并且不会触发。

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', //This will fire.
    }, 
    forgotPasswordSubmit: function(e){
        alert($(".forgot_password_email").val());
        e.preventDefault();
    }
});

经过大量研究，我找到了解决问题的方法。我不确定这是否有任何严重问题。我还没有遇到任何问题，如果我找到任何内容，我会更新这篇文章：

为同一视图创建新实例的想法，但这次与另一个el。通过这种方式，我们可以使用第一个el执行初始化和渲染函数，并使用下一个函数来执行事件。

一个缺点是，您将无法使用this之类的东西来获得第一个el peoperties。但由于我使用jquery，我可以使用选择器来完成这个。除此之外，我没有发现任何问题......但是。！

new ForgotPasswordView ({
   el:'#master_template'
});

Answer 3

是另一个视图中的 right_btn 吗？

您可以通过实施全局事件总线来实现这一目标:)

请参阅此答案以获取更多详细信息。 Call a function in another Marionette.ItemView

在骨干视图中访问el之外的click事件

3 个答案: