骨干 - 防止相同的视图重叠

Question

假设表中的每一行都有自己的视图和模型（CollectionViews）。每行都有一个用于编辑行数据的按钮。单击时，将为当前行和模型激活EditView，其中表单将通过文本字段和取消并提交按钮呈现给用户。

只有在用户提交编辑表单或取消编辑时，才能删除编辑视图。

我的问题是什么是阻止多个编辑视图重叠的最佳方法 ，例如当用户点击编辑按钮，而不是编辑或关闭编辑视图时，而是单击另一行和另一行上的编辑按钮，而不完成编辑。

我刚开始学习骨干，所以这就是我所做的 - 这更像是一个黑客攻击。

//create global array for storing view
var editTaskViewArray = new Array();

创建编辑视图时的代码

//delete previous view
for (x in editTaskViewArray) {
   editTaskViewArray[x].remove();
}

//empty array
editTaskViewArray = [];

//create and activate edit view
var editTaskView = new App.Views.EditTask({ 
   model: this.model 
}).render();
$('#edittask').append(editTaskView.el).hide().fadeIn(500);

//add edit view to array so that can be removed later
editTaskViewArray.push(editTaskView);

感谢您提供任何提示

Answer 1

//将删除代码更改为。

//editTaskView is global
//delete previous view if one exists

If(editTaskView.el){
    editTaskView.remove();
}

//create and activate edit view
editTaskView = new App.Views.EditTask({model:this.model }).render();

$('#editTaskView').append(editTaskView.el).hide().fadeIn(500);

Answer 2

另一种解决方案，每当激活视图时，禁用所有链接以使当前视图成为模态视图，例如行中的所有链接都使用类，例如.delete和.edit。这样，只有当用户关闭当前视图时才能激活所有其他视图

<td><a class='delete' href='#'>Delete</a></td> \
<td><a class='edit' href='#'>Edit</a></td>";

使用此代码禁用链接并通过更改类名

来禁用事件

$( "#tbl1" ).find( "a" ).removeAttr("href");
$( "#tbl1" ).find( "a.delete" ).attr("class", "nodelete");
$( "#tbl1" ).find( "a.edit" ).attr("class", "noedit");
$( "#tbl1" ).find( "a.nodelete" ).css("opacity", "0.6");
$( "#tbl1" ).find( "a.noedit" ).css("opacity", "0.6");

使用此代码启用链接

$( "#tbl1" ).find( "a" ).attr("href", "#");
$( "#tbl1" ).find( "a.nodelete" ).attr("class", "delete");
$( "#tbl1" ).find( "a.noedit" ).attr("class", "edit");
$( "#tbl1" ).find( "a.delete" ).css("opacity", "1");
$( "#tbl1" ).find( "a.edit" ).css("opacity", "1");