草庐IT

关于backbone.js：Backbone.Marionette 的分组集合和视图

codeneng 2023-03-28 原文

Grouped collection and views with Backbone.Marionette

我有一个 Backbone 文档集合，我想按月分组，以便将在同一个月内创建的所有文档分组在一起。我知道我基本上可以通过以下方式实现：

1
2
3
var byMonth = documents.groupBy(function(doc){
  return this.get('date').getMonth()
});

现在我有了 byMonth 数组，设置主干视图的最佳方法是什么，当项目添加到集合时自动更新，其中一个文档的日期发生更改等 - 以便文档会自动移动到正确的组并相应地更新视图？

PS。我还想显示每个月的汇总数据(例如，文档数量等)。

Marionette 的 CompositeView 非常适合此类事情，但我不确定是否以及如何使其与分组集合一起使用？

  • 我认为没有任何本机方法可以自动更新您的 groupBy 因为它并不是 Backbone 真正使用的东西(我会说这种方法更多是出于礼貌添加)。
  • 我也是这么想的。我在想我可以使用 groupBy 创建更小的、基于月份的集合并为它们使用 CompositeView。我想知道再次运行 groupBy 并从组中重置基于月份的集合是否会重新呈现整个视图或只是更新更改的内容？
  • 我不太了解 Marionette，也不了解您的应用程序的精确结构，所以我不能说太多。我认为您的问题过于具体。

我想了很多，但没有一个完美的答案，但这是我的笔记(脑力转储)，以防它们帮助/激发你的任何新想法：

显示(和自动更新)分为 3 个部分/组的集合的最佳方式，例如本周、下周和即将到来的

  • 过滤View外的集合：在Controller中创建过滤后的子集合，每个CollectionView传一个。然后有 2 个用于修改集合的选项：

    • a) 直接修改3个子集合

      • 优点：自动更新将起作用，CollectionView 中不需要过滤逻辑，emptyView 将起作用，在每个部分的顶部很容易计数。
      • 缺点：必须在我们可能想要修改它们的任何地方传递这 3 个集合，并且在添加/删除事件时有这个额外的逻辑：if (event.time<next-week) {...} else if (event.time<upcoming) {...} else {...}。可以将所有这些抽象为一个新实体，该实体具有所有 3 个集合的引用，并具有包含上述逻辑的简单添加/删除方法。
      • 另一个缺点：项目不能在这些子集合之间移动，如果分组是特定时间的，这可能很关键。虽然我猜这只会在完全重新渲染时发生，所以你可以有一个 updateSubCollections 方法并调用它 onBeforeRender 或其他什么。
    • B)仅修改父集合 - 需要主集合上的侦听器，用于在添加/删除时手动重新过滤控制器中的每个子集合，并手动重新渲染所有 3 个列表视图。

      • 优点：CollectionView 非常简单——没有过滤逻辑等，emptyView 可以正常工作，很容易在每个部分的顶部进行计数。
      • 缺点：你失去了自动更新的魔力(当一个集合发生变化时，它的 collectionView 会自动更新)，并且每次都需要一个愚蠢的(昂贵的)重新渲染整个 collectionView
  • 过滤 View 内的集合：将完整集合传递给每个 CollectionView，并覆盖 appendHTML 方法(或 showCollection)以仅显示满足条件的集合。

    • 优点：获得自动更新的魔力，并且仍然只处理代码中任何地方的单个集合
    • 缺点：需要额外的逻辑才能在每个部分的顶部显示计数。需要一些额外的逻辑来显示空视图，并且可能会产生其他后果，因为我怀疑 CollectionViews 是为此而设计的。他们可能在后台使用所有 itemView 做一些聪明的事情——这可能效率低下——需要研究。查看源代码并找到要覆盖的最佳(最高级别)函数以不打扰处理不相关的项目
  • 单视图选项：通过手动将每个视图附加到页面的右侧部分来过滤视图的 appendHtml() 函数内的集合。

    • 优点：所有逻辑都在一个地方，但可能不是正确的地方(CollectionView)。自动更新有效。仍然只处理代码中各处的单个集合。
    • 缺点：需要额外的逻辑才能在每个部分的顶部显示计数。需要为每个部分手动处理 emptyView，这并不难 - 在您的模板中只需定义包含空消息的所有部分，然后在 appendHtml 函数中，当您确定项目属于哪个部分时，只需在附加之前隐藏该部分的空消息。那么问题是如何在从集合中删除项目时隐藏空白部分。唯一的方法是侦听集合上的删除事件，并检查所有部分以查看它们是否为空？或者只是重新渲染整个事情。

    • 当我第一次加入我现在的团队时，他们有一些实现选项 1B 的旧代码，我认为这很糟糕。然后，当我必须实现类似的东西时，我选择了选项 3，它有效，但随着时间的推移有点混乱。下次我想我会尝试选项 1A，但目前尚未测试...

    告诉我你最后做了什么！

    编辑：Github 上 Marionette 项目的几个相关问题：

    • CollectionView / CompositeView 应该有一个可选的过滤方法
    • 添加过滤集合视图的功能

    您可以创建一个新的 byMonth 集合并绑定一个函数以在每次文档集合更改时重置它。

    控制器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    App.Controller = function(){
      this.documents = new DocumentCollection();
      this.byMonthCollection = new ByMonthCollection();
      this.byMonthView = new ByMonthView({collection: this.byMonthCollection});
    }

    _.extend(App.Controller.prototype, {
      start: function() {
        this.documents.bind("change", _.bind(this.groupByMonth, this));
        this.documents.fetch();
      },
      groupByMonth: function() {
        var grouped = documents.groupBy(function(doc){
                        return this.get('date').getMonth() });

        this.byMonthCollection.reset(grouped);
      }
    }
    Marionettebackbonesectionnbspbrbackbone.jsmarionette

    有关关于backbone.js：Backbone.Marionette 的分组集合和视图的更多相关文章

    1. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

      在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

    2. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

      //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

    3. ruby - 在 Ruby 中创建按公共(public)键值分组的新哈希 - 2

      假设我有一个在Ruby中看起来像这样的哈希:{:ie0=>"Hi",:ex0=>"Hey",:eg0=>"Howdy",:ie1=>"Hello",:ex1=>"Greetings",:eg1=>"Goodday"}有什么好的方法可以将它变成如下内容:{"0"=>{"ie"=>"Hi","ex"=>"Hey","eg"=>"Howdy"},"1"=>{"ie"=>"Hello","ex"=>"Greetings","eg"=>"Goodday"}} 最佳答案 您要求一个好的方法来做到这一点，所以答案是:一种您或同事可以在六个月后理解

    4. ruby-on-rails - 关于 Ruby 的一般问题 - 2

      我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件，但有一段代码我不完全理解，我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法，但我在插件的任何地方都找不到定义为常量的CLASS_METHODS，而且我也不确定是什么here，并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕，我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

    5. ruby - 按数字(从大到大)然后按字母(字母顺序)对对象集合进行排序 - 2

      我正在构建一个小部件来显示奥运会的奖牌数。我有一个“国家”对象的集合，其中每个对象都有一个“名称”属性，以及奖牌计数的“金”、“银”、“铜”。列表应该排序:1.首先是奖牌总数2.如果奖牌相同，按类型分割(金>银>铜，即2金>1金+1银)3.如果奖牌和类型相同，则按字母顺序子排序我正在用ruby​​做这件事，但我想语言并不重要。我确实找到了一个解决方案，但如果感觉必须有更优雅的方法来实现它。这是我做的:使用加权奖牌总数创建一个虚拟属性。因此，如果他们有2个金牌和1个银牌，加权总数将为“3.020100”。1金1银1铜为“3.010101”由于我们希望将奖牌数排序为最高的，因此列表按降序排

    6. arrays - 如何在下面的示例中将两个值数组分组为 n 个值数组？ - 2

      我已经有很多两个值数组，例如下面的例子ary=[[1,2],[2,3],[1,3],[4,5],[5,6],[4,7],[7,8],[4,8]]我想把它们分组到[1,2,3],[4,5],[5,6],[4,7,8]因为意思是1和2有关系，2和3有关系，1和3有关系，所以1,2,3都有关系我如何通过ruby​​库或任何算法来做到这一点？ 最佳答案 这是基本Bron–Kerboschalgorithm的Ruby实现:classGraphdefinitialize(edges)@edges=edgesenddeffind_maximum_

    7. ruby - 如何将相同的相邻数字分组 - 2

      如果至少有两个相邻的数字相同，格式为，我需要打包.这是我的输入:[2,2,2,3,4,3,3,2,4,4,5]以及预期的输出:"2:3,3,4,3:2,2,4:2,5"到目前为止我试过:a=[1,1,1,2,2,3,2,3,4,4,5]a.each_cons(2).any?do|s,t|ifs==t如果相等，也许可以尝试计数器，但那是行不通的。 最佳答案 您可以使用Enumerable#chunk_while(如果你使用的是Ruby>=2.3):a.chunk_while{|a,b|a==b}.flat_map{|chunk|chu

    8. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

      我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

    9. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

      rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

    10. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

      按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

    随机推荐