backbone - 防止相同视图重叠

Question

假设 table 中的每一行都有自己的视图和模型 (CollectionViews)。每行都有一个用于编辑行数据的按钮。单击时，将为当前行和模型激活 EditView，其中向用户显示带有文本字段和取消并提交按钮的表单。

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

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

我刚开始学习 backbone，所以这就是我所做的 - 这更像是一种技巧。

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

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

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

使用此代码禁用 link 并通过更改 class 名称禁用事件

$( "#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");

使用此代码启用 link

$( "#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");

backbone - 防止相同视图重叠

backbone - preventing same view from overlapping

javascript

backbone.js