有时我们会发现,评论的内容属于垃圾信息,因此需要将其删除。因此,我希望在查看评论 时,有一个删除的链接,点击后可以让我把它删除。
这个需求比较简单,删除标签在前面已经有了,所以可以直接使用。在删除后,因为评论条 数变化,所以应该两个显示都发生变化,一会我们看随后的结果是不是正确。
Avalon 中提供了大量的事件响应处理的属性,其中 ms-click
就是用来处理点击的属性。 我们修改:
<a class="delete">Delete</a>
为:
...
<a class="delete" ms-click="remove(el)">Delete</a>
...
在 ms-click
后面是一个回调函数 remove
。如果这个回调没有参数,则可以不带括号。如果带 参数则传入相应的参数即可。这里传入了循环变量 el
。
然后让我们在 comments
Model 中定义对应的 remove
函数,如:
...
//begin of remove
vm.remove = function(el){
vm.comments.remove(el);
}
//end of remove
...
这个处理很简单。注意,Avalon对数据对象扩展了很多方法,这里可以直接调用 comments
的 remove
方法,它需要的不是索引值,而是元素本身。如果要删除指定的索引元素,可以 使用 removeAt(index)
方法。
作者司徒正美对于删除操作,又给了另一种做法,就是使用 $remove
,这个是 ms-repeat
在渲染时自动生成的,可以用来删除当前项。因此我们按这种办法修改一下:
将页面删除的事件,修改为:
...
<!-- delete action begin -->
<div class="actions">
<a class="delete" ms-click="remove($remove)">Delete</a>
</div>
<!-- delete action end -->
...
这里, remove()
函数的参数改为了 $remove
将 remove
的代码调整一下:
...
//begin of remove
vm.remove = function(rm){
rm();
}
//end of remove
...
参数改为 rm
方便理解。然后调用 rm()
删除即可。更简单方便。