Question

我非常擅长使用Backbone。请原谅我，因为我正在努力思考构建网络应用程序的新方法。

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

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

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

所有To-Dos（100）
收件箱（15）

重要（10）
总有一天（15）

今天（0）
明天（6）
本周（7）

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

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

同样，我理解了待办事项和待办事项集的模型时的样本，但我很难理解如何使用Backbone处理这些看似简单的项目。

我感谢任何建议或指导。

Answer 1

这里要记住的重要一点是backbone.js中的集合继承了underscore.js的一系列很酷的功能。其中包括filter（或选择），它允许您仅获取与您的参数匹配的集合成员。例如：

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

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

[
    {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;}}
]

只要为菜单项生成视图，就必须确定菜单是否为静态。如果是，那么您可以简单地将项目硬编码到不同的控制器路由。如果不是，那么你应该使用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调用。然后，您可以将此集合传递给视图，并根据需要渲染项目。

希望这有帮助！

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

1 个答案: