javascript - Backbone.js - 过滤集合与多个集合

标签 javascript collections filter backbone.js

我正在使用 backbone.js 构建一个文件管理器。它是我构建的 CMS(内容管理系统)的一部分,可通过灯箱/模式窗口访问。我需要显示附加到特定内容类型(如帖子)的文件以及一般的所有文件。

此时我有两个独立的集合,一个 libraryCollection(所有文件)和 galleryCollection(一个帖子文件)。我使用此方法遇到的第一个问题是:编辑 libraryCollection 中的文件并将模型更改事件绑定(bind)到 View 显然不会影响 galleryCollection View 。

有更好的方法吗?我想我需要为 libraryCollection 分页(就像在真正的分页中一样,从服务器检索的结果只有 xx 个),这可能会使事情复杂化。除非将潜在的数千条记录加载到集合中可以吗?

更新:

最快(可能最脏)的方法是使用内置的 Backbone.Events 系统。示例代码:

var aggregator = {};
_.extend(aggregator, Backbone.Events);

aggregator.on("fileUpdated", function(model){
    if(app.libraryCollection && app.galleryCollection){
        libraryModel = app.libraryCollection.get(model.get("id"));
        galleryModel = app.galleryCollection.get(model.get("id"));
        libraryModel.set(model.attributes);
        galleryModel.set(model.attributes);
    }   
});

然后是编辑器 View :

window.EditorView = Backbone.View.extend({

    saveModel: function(){
        self = this;
        form = $(this.el).find("form").serializeArray();
        _.each(form, function(field){
            self.model.set(field["name"], field["value"]);
        });
        self.model.save();
        aggregator.trigger("fileUpdated", this.model);
    }
});

这会同步两个集合中的模型,并且因为我将模型更改事件与渲染函数(未显示)绑定(bind)在一起,所以 View 反射(reflect)了库和画廊 View 中的更改。

最佳答案

对于我们来说,一个事件聚合器是解决您在单独的 Backbone.js 组件之间进行通信的问题的一个潜在解决方案。在事件聚合器模式中,组件(例如 View )将共享对聚合器的引用,聚合器是一个充当应用程序中央通信中心的对象。两者都与聚合器对话,而不是一个 View 订阅另一个 View 上的事件,聚合器将消息传递给订阅该类型消息的任何组件。

例如,您的 libraryCollection 可能会在聚合器上触发 fileAdded 事件,在消息中传递新的 file 对象。您的 galleryCollection 将订阅聚合器上的 fileAdded 事件,并且它会在触发时采取一些操作,例如从服务器刷新自身或添加传递的 file 对象本身。

这是一个 excellent blog post涵盖了事件聚合器模式。

一次将数千条记录加载到一个集合中听起来很麻烦。

关于javascript - Backbone.js - 过滤集合与多个集合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9857391/

相关文章:

javascript - jQuery 单击事件在 Firefox 中根本不起作用

.net - KeyedCollection 是否有一般的具体实现?

python - Django:扩展查询集/使用 OR 连接多个过滤器

JQuery 过滤器(字符串选择器)不能与 find() 结合使用

javascript - Ionic 3 - ionic 选择(多个)在选择两个项目后禁用所有选项

javascript - mousemove 在 IE8 和以前的版本中是如何处理的?

java - FIFO 顺序固定容量的线程安全集合

java - 为什么归并排序可以比较两个项目两次?

filter - Elasticsearch:错误的方面条件结果

javascript - 流程图和状态机