- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图了解在 Backbone 项目的不同组件之间进行通信的最佳实践是什么。我一直在重新实现 TodoMVC 的 Backbone 版本我的问题是从集合对象中删除模型。
据我所知,只要通过 .set()
修改任何模型属性,Backbone 模型实例就会触发更改事件。并且与模型实例关联的 View 应该 .listenTo()
从模型实例更改,然后重新渲染。然而,模型和容纳它的集合对象之间通信的最佳实践是什么?例如,当模型从集合对象中删除时,通信应如何进行?
这是我的想法:当删除模型时,我认为模型实例应该发出集合对象正在监听的自定义事件并传递自身。当集合对象听到此事件时,它应该从列表中删除模型实例(以及附加到模型的任何事件监听器),然后整个集合对象应该重新呈现自身。然后,此重新渲染过程将创建一组新的模型和模型 View 。
这是最好的方法吗?我很想听听您的意见!对我来说,这个重新渲染的过程听起来非常昂贵,因为您必须销毁现有的 DOM 元素,删除它们的事件监听器,然后再次重新创建它们。
更新 - 2015 年 3 月 26 日
为了使这一点更加具体,我将包含迄今为止的代码,并指出我认为我的理解有偏差的地方。
文件结构
收藏
a. todoList.coffee
模型
a. todo.咖啡
观看次数
a. todoView.coffee
b. todoListView.coffee
app.coffee
app.coffee
window.app = app = window.app || {}
data = [
{
title: 'Eat dinner',
completed: false
}
{
title: 'Go to gym',
completed: true
}
]
app.todos = data.map (todo) -> new app.Todo todo
app.todoList = new app.TodoList app.todos
app.todoListView = new app.TodoListView
collection: app.todoList
app.$app = $('#todo-app')
$('#todo-app').append app.todoListView.render().el
todo.coffee
window.app = app = window.app || {}
app.Todo = Backbone.Model.extend
defaults:
title: ''
completed: false
toggleComplete: ->
this.set 'completed', !this.get 'completed'
todoList.coffee
window.app = app = window.app || {}
app.TodoList = Backbone.Collection.extend
model: app.Todo
initialize: () ->
# This is what I don't like - creating 'remove-todo' event
this.on 'remove-todo', this.removeTodoFromList
removeTodoFromList: (model) ->
this.remove model
getCompleted: ->
this.filter (model) -> model.completed
getNotCompleted: ->
this.filter (model) -> !model.completed
todoView.coffee
window.app = app = window.app || {}
app.TodoView = Backbone.View.extend
tagName: 'li'
events:
'click input' : 'checkComplete'
'click .delete' : 'removeTodo'
checkComplete: (e) ->
this.model.toggleComplete()
removeTodo: (e) ->
# I don't like how the collection is listening for this custom event 'remove-todo'
this.model.trigger 'remove-todo', this.model
initialize: ->
this.listenTo this.model, 'change:completed', () ->
this.render()
render: ->
template = _.template $('#todo-view').html()
this.$el.html template this.model.toJSON()
return this
todoListView.coffee
window.app = app = window.app || {}
app.TodoListView = Backbone.View.extend
tagName: 'ul'
className: 'todo-list'
initialize: ->
this.collection.on 'remove', (() ->
this.resetListView()
this.render()
), this
addOne: (model) ->
todoView = new app.TodoView
model: model
this.$el.append todoView.render().el
resetListView: ->
this.$el.html('')
render: ->
_.each this.collection.models, ((model) -> this.addOne model), this
return this
代码说明
正如您在上面的评论中看到的,每当单击删除按钮时,我的 todoView 都会触发自定义事件“remove-todo”。 todoList 集合监听此事件并从集合中删除特定模型。由于每当集合删除模型时都会触发“删除”事件,因此 todoListView 会监听此“删除”事件,然后重新渲染。我觉得我好像离开了某个地方。 有什么建议吗?
最佳答案
当你谈论模型时,你似乎在谈论 View 。当模型从集合中删除时,您不需要自定义事件,则会触发“删除”事件。 http://backbonejs.org/#Collection-remove
如果要删除相应的 View ,请使用 http://backbonejs.org/#View-remove这将管理 DOM 和监听器。
如果你听“从集合中删除”模型,就可以触发 View 的重新渲染(我不明白你在谈论重新渲染集合时在说什么),否则听http://backbonejs.org/#Collection-add ,或http://backbonejs.org/#Model-hasChanged您是否想在模型更改时重新渲染 View 。
希望对您有帮助。
关于javascript - 与 Backbone 模型通信的 Backbone 集合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29272626/
编辑:我似乎问错了这个问题。 我正在尝试寻找一种方法来查询一个集合是否在另一个集合中可用。例如: SELECT * FROM something WHERE (1, 3) IN (1, 2, 3, 4
这两种方法似乎 produce the same results ,但我一直很难真正说服人们第二种方法有效,因为它显然并不为人所知。 // Create some data var foo = { '
我一直在学习Kotlin,并且遇到过Collections API。在Kotlin之前,我一直在学习Java,并且我知道Java中有很多不同类型的Collections API。例如,我们使用List
为什么我会得到不同的行为: Collection col2 = new ArrayList(col); 集合 col2 = new ArrayList(); col2.addAll(col) 我正在与
所以我有一个代表专辑信息的 JSON 对象。给定“function updateRecords(id, prop, value)”我希望能够更新每个条目。正确的完成代码如下。 我得到了指示,粗体部分,
我想存储一个对象集合,这些对象根据它们所代表的值进行键控。这些键可以重复。例如: [4] => Bob [5] => Mary [5] => Sue [9] => Steve [10] =>
在检查 ArrayList API 时,我注意到一些看起来很奇怪的东西。 确实,这里是 ArrayList 构造函数实现,其中 Collection 作为参数传递: public ArrayList(
我正在为 API 编写一个 swagger 定义文件。 API 是用于 GET 请求的 /path/to/my/api: get: summary: My Custom API d
我知道scala.collection包中有两个非常有用的对象,可以帮助我们实现这个目标: JavaConverters(如果我想明确说明并准确说明我要转换的内容) JavaConversions(如
我已经阅读了无数其他帖子,但似乎无法弄清楚发生了什么,所以是时候寻求帮助了。 我正在尝试将包含集合的域实体映射到也包含集合的 dtos。 这是一个原始示例; (我提前为代码墙道歉,我尽量保持简短):
我正在创建一个具有 ArrayList 的类,因此当我调用构造函数时,它会初始化该数组: public class ElementsList { private ArrayList list;
我正在阅读事件指南和指南的开头,它说: You can also add an event listener to any element in the this.$ collection using
我是 Python 新手,想知道如何使用键在字典中存储不同数据类型的列表 例如 - {[Key1,int1,int1,String1] , [Key2,int2,int2,String2], [Key
int[] mylist = { 2, 4, 5 }; IEnumerable list1 = mylist; list1.ToList().Add(1); // why 1 does not get
我在 UI 表单中的每一行之后将以下内容添加到 HashMap 集合中 声明 Map> map = new HashMap>(); List valSetOne = new ArrayList();
我正在开发我的第一个 Java 项目,我有一个问题。问题应该很简单(虽然代码不是那么短,但没有理由被吓倒:))。我创建了一个基本的角色扮演游戏,并且有一个定义每个角色的抽象类“Character”。在
我正在开发一款应用程序,可以为用户收集推文、Facebook 状态和 Facebook 照片。目前,用户确切地设定了他们希望这种收获发生的时间和时间,并且蜘蛛会在此期间拉取数据。 when 和 to
有谁知道在 C# 中是否有与 Java 的 Set 集合等效的好方法?我知道您可以通过填充但忽略值来使用 Dictionary 或 HashTable 在某种程度上模仿集合,但这不是一种非常优雅的方式
EXISTS 该函数返回 集合中第一个元素的索引,如果集合为空,返回NULLNULLNULL Collecti
RDF集合是通过属性 rdf:parseType="Collection" 来描述仅包含指定成员的组 rdf:parseType="Collection" 属
我是一名优秀的程序员,十分优秀!