Backbonejs事件发生多次 [英] Backbonejs event occurring multiple times
问题描述
我有在网格显示项目的视图。如果点击一个按钮来创建一个新的行，会显示一个弹出窗口（使用SimpleModal），允许用户将行保存到服务器。如果一切顺利，该窗口关闭，网格是刷新。一切工作正常了这一点。如果我现在把窗户打开第二次，保存记录的事件将被调用两次。如果我关闭和打开窗口中的第三次，则该事件将被调用三次，等我不知道为什么事件越来越反弹多次。下面是我的两种观点：
FieldList中查看：
VAR fieldListView = Backbone.View.extend（{
EL：#centerbodycontent
初始化：功能（）{
_.bindAll（在此，呈现，激活addField'）;
}，渲染：功能（）{
$（this.el）.empty（）;
$（＃FieldGridTemplate）TMPL（{结果：this.model}）。appendTo（this.el）。
条纹（$（this.el）.find（TBODY））;
返回此;
}，
事件：{
点击＃激活addField：激活addField
}，
激活addField：功能（E）{
window.appController.popup =新fieldFormView（{模式：新的fieldModel（{contenttype_id：this.model.id}）}）;
window.appController.popup.render（）;
}
}）;
表格视图（这是被调用的弹出式）
VAR fieldFormView = Backbone.View.extend（{
EL：#popupwindowcontent事件：{
点击#savefieldandnew：savefield
点击#savefieldandclose：savefield
变输入，文本区域，选择：变化区域
}，
渲染：功能（）{
VAR formWrapper = $（this.el）.find（模态形式。）[0];
$（formWrapper）.empty（）;
$（＃FieldFormTemplate）TMPL（{结果：this.model}）。appendTo（formWrapper）。
的OpenForm（this.el添加域，450，600）;
返回此;
}，
//在实地的变化自动更新模型
变化区域：功能（E）{
VAR changeobj =新对象;
开关（e.target.type）{
案电台：
changeobj [e.target.id] = parseInt函数（$（e.target）.VAL（））;
打破;
案复选框：
changeobj [e.target.id] = $（e.target）。是（：检查）;
打破;
默认：
changeobj [e.target.id] = $（e.target）.VAL（）;
打破;
} 如果（e.target.id.toLowerCase（）==名称）{
变种K = $（this.el）.find（＃键）;
如果（jQuery.trim（k.val（））。长度== 0）
k.val（$（e.target）.VAL（）代替（/ [^ A-ZA-Z0-9] + /克，''）.toLowerCase（））; 变种L = $（this.el）.find（＃标签）;
如果（jQuery.trim（l.val（））。长度== 0）
l.val（$（e.target）.VAL（））;
} VAR的选择= {沉默：真正};
this.model.set（changeobj，期权）;
}，
savefield：功能（E）{
VARķcode =（e.which）;
VAR THIZ =这一点;
变种M = this.model;
VAR nextaction = e.target.id;
警报（nextaction）;
如果（K code == 0 ||ķcode == 1 ||ķcode == 32）{
亦即preventDefault（）;
如果（$（＃contentfieldform）。验证（{
规则：{
名称：{要求：真正}，
标签：{要求：真正}，
键：{要求：真正}
}
}）形式（））{
m.save（NULL，{
标题：{如果 - 匹配：m.get（版本）}，
错误：功能（模型，响应）{
VAR errResp = JSON.parse（response.responseText）;
popupException（内容类型修改错误，errResp.errors [0] .message）;
}，
成功：函数（模型，响应）{
window.appController.popup.model =新fieldModel;
$ .pnotify（{
pnotify_title：字段中已保存，
pnotify_text：本场已成功保存。
}）; 如果（nextaction ==savefieldandclose）{
$ .modal.close（）;
}
}
}）;
}
}
}
由于没有人接，我想我会增加一些，以防有人运行到更多的相关信息。一个很好的资源来解释所发生的事情（而且提供了一个通用的解决方案）是<一个href=\"http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/\">http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/.此外，骨干网的最新版本有一些新的方法，让事件的注销，从意见。
I have a view that displays items in a grid. If a button to create a new row is clicked, a popup window (use SimpleModal) is displayed to allow the user to save the row to the server. If all goes well, the window closes and the grid is refreshed. All works fine up to this point. If I now open the window a second time, the save record event will get called two times. If I close and open the window a third time, then the event will be called three times, etc. I have no idea why the event is getting rebound multiple times. Here are my two views:
FieldList View:
var fieldListView = Backbone.View.extend({
el: "#centerbodycontent",
initialize: function () {
_.bindAll(this, 'render', 'addField');
},
render: function () {
$(this.el).empty();
$("#FieldGridTemplate").tmpl({ results: this.model }).appendTo(this.el)
stripe($(this.el).find("tbody"));
return this;
},
events: {
"click a#addfield": "addField"
},
addField: function (e) {
window.appController.popup = new fieldFormView({ model: new fieldModel({ contenttype_id: this.model.id }) });
window.appController.popup.render();
}
});
Form View (this is what gets called for the popup)
var fieldFormView = Backbone.View.extend({
el: "#popupwindowcontent",
events: {
"click #savefieldandnew": "savefield",
"click #savefieldandclose": "savefield",
"change input,textarea,select": "changeField"
},
render: function () {
var formWrapper = $(this.el).find(".modal-form")[0];
$(formWrapper).empty();
$("#FieldFormTemplate").tmpl({ results: this.model }).appendTo(formWrapper)
OpenForm(this.el, "Add Field", 450, 600);
return this;
},
// automatically updates the model during field changes
changeField: function (e) {
var changeobj = new Object;
switch (e.target.type) {
case "radio":
changeobj[e.target.id] = parseInt($(e.target).val());
break;
case "checkbox":
changeobj[e.target.id] = $(e.target).is(":checked");
break;
default:
changeobj[e.target.id] = $(e.target).val();
break;
}
if (e.target.id.toLowerCase() == "name") {
var k = $(this.el).find("#key");
if (jQuery.trim(k.val()).length == 0)
k.val($(e.target).val().replace(/[^a-zA-Z0-9]+/g, '').toLowerCase());
var l = $(this.el).find("#label");
if (jQuery.trim(l.val()).length == 0)
l.val($(e.target).val());
}
var options = { silent: true };
this.model.set(changeobj, options);
},
savefield: function (e) {
var kcode = (e.which);
var thiz = this;
var m = this.model;
var nextaction = e.target.id;
alert(nextaction);
if (kcode == 0 || kcode == 1 || kcode == 32) {
e.preventDefault();
if ($("#contentfieldform").validate({
rules: {
name: { required: true },
label: { required: true },
key: { required: true }
}
}).form()) {
m.save(null, {
headers: { "If-Match": m.get("version") },
error: function (model, response) {
var errResp = JSON.parse(response.responseText);
popupException("Content Type Modification Error", errResp.errors[0].message);
},
success: function (model, response) {
window.appController.popup.model = new fieldModel;
$.pnotify({
pnotify_title: 'Field Saved',
pnotify_text: 'The field was saved successfully.'
});
if (nextaction == "savefieldandclose") {
$.modal.close();
}
}
});
}
}
}
Since nobody answered I thought I would add some more info in case anyone runs into this. A good resource to explain what is happening (and offer a generic solution) is http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/. Also, the latest version of backbone has some new methods to allow unregistering of events from views.
这篇关于Backbonejs事件发生多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
