在骨干视图中访问el之外的click事件
如何访问el范围之外的click事件。
我有什么：HTML：
查看：
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视图 – 将事件绑定到“el”之外的元素
如何绑定Backbone子视图中的单击事件
但并没有真正帮助我实现它。
如何在视图中获得.right_btn的click事件。 我无法更改模板结构以在el包含right_btn 。 无论如何，在这里绑定外部元素或识别骨干视图本身内的click事件。
不幸的是，没有办法只使用骨干库这样做。 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);
实际上有一种方法：
以下是具有主模板的原始视图，在元素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执行initialize和render函数，并使用下一个函数执行事件。
一个缺点是你将无法使用这样的东西获得第一个el peoperties。 但由于我使用jquery，我可以使用选择器来完成这个。 除此之外，我没有发现任何问题……
new ForgotPasswordView ({ el:'#master_template' });
在另一个视图中是你的right_btn ？
你可以通过实现一个全局事件总线来做到这一点:)
有关详细信息，请参阅此答案。 在另一个Marionette.ItemView中调用一个函数