Backbone.js - 静态菜单方法的帮助

Question

我对使用 Backbone 很陌生。请提前原谅我，因为我正在努力以新的方式思考构建网络应用程序。

我对如何将它用于任何教程中从未真正涵盖的项目感到困惑。所有教程都给出了基本的“这里是一个模型”、“这里是一个模型的集合”、“这里是一个使用模型的 View ”等我们都理解的实体，例如一个待办事项。

我确实有这些情况，并且我对这些情况很好，但是我无法弄清楚如何在以下情况下使用 Backbone。

我有一个待办事项应用程序(当然)。我的 UI 需要有几个菜单，允许用户根据优先级、截止日期和其他属性等内容过滤待办事项。所以，我的过滤器菜单可能看起来像这样......

所有待办事项 (100)

收件箱 (15)

重要 (10)

总有一天 (15)

今天 (0)

明天(6)

本周(7)

这些都是有点静态的菜单，除了当点击过滤器时，它应该突出显示，并可能导致另一个过滤器被关闭。此外，这将通过执行搜索和重新呈现我的待办事项列表来触发我的结果更新。

那么，我应该只用 View 来表示这些项目吗？是否需要模型来表示菜单的状态？我应该创建一个 FilterMenuItem 模型和 FilterMenu 模型，以及相应的 View 吗？

同样，当涉及到待办事项和待办事项集合的模型时，我理解示例，但我对如何使用 Backbone 处理这些看似简单的项目感到困惑。

我感谢任何建议或指导。

Answer 1

这里要记住的重要一点是，backbone.js 中的集合从 underscore.js 继承了一堆很酷的特性。 .其中包括 filter (或选择)，它允许您仅获取与您的参数匹配的集合中的那些成员。例如:

render: function(){
    myCollection.filter(function(item){return item.folder === "inbox"});
}

如果菜单实际上是静态的，那么您可以使用 case select语句来确定您在哪个页面上并因此使用哪个过滤器。否则，您可以拥有一个表示 View 的对象数组，这些对象描述了如何过滤，即:

[
    {view: "all", filter: function(item){return item;}}.
    {view: "inbox", filter: function(item){return item.foler === "inbox";}}, 
    {view: "important", filter: function(item){return item.type === "important;}}
]

就为您的菜单项生成 View 而言，您必须决定菜单是否是静态的。如果是，那么您可以简单地将项目硬编码到不同的 Controller 路由。如果不是，那么您可能应该使用 menuItem 模型的集合:

var menuItem = Backbone.Model.extend({});
var menuList = Backbone.Collection.extend({
    model: menuItem
});
var menu = new menuList([{name: "All To-Dos", url: "#!/all"}, {name: "index", url: "#!/index"}]);

您可以动态添加或删除项目，以及根据服务器规范构建选项(即用户可以保存自定义文件夹，这些文件夹将在此处添加)使用 refresh命令以避免不必要的 http 调用。然后，您可以将此集合传递给您的 View ，并根据需要呈现项目。

希望这可以帮助!