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

我在使用Backbone时很新颖。请原谅我，因为我正在努力以新的方式思考构建Web应用程序。Backbone.js - 帮助静态菜单的方法

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

我确实有这些情况，而且我对这些情况行得通，但我无法弄清楚如何在以下情况下使用Backbone。

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

所有-DOS（100）
收件箱（15）

重要（10）
有一天（15 ）

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

这些都是有些静态菜单，不同之处在于被点击过滤器时，应该强调，并可能导致另一个过滤器被关断。此外，这将通过执行搜索并重新呈现我的待办事项列表来触发我的结果更新。

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

同样，我了解样品，当涉及到待办事项和待办事项集合的模型时，但我很难理解如何使用Backbone解决这些看似简单的项目。

我欣赏任何建议或指导。

来源

2011-06-03 Kevin

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

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

如果菜单实际上是静态的，那么你可以使用一个case select语句来确定你是哪个网页上&因此要使用的过滤器。否则，你可以有代表意见的对象，它描述如何筛选，即数组：

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

至于生产为您的菜单项的看法的话，你必须决定是否在菜单是静态的或不。如果是这样，那么你可以简单地将项目硬编码到不同的控制器路由。如果不是，那么你或许应该使用菜单项的模型的集合：

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调用。然后，您可以将此集合传递给您的视图，然后根据需要呈现这些项目。

希望这会有所帮助！

来源

2011-06-03 05:22:20 idbentley

谢谢！ underscore.js中的过滤器函数需要填充整个集合以产生正确的结果，对吧？我正在考虑只加载符合过滤标准的服务器中的项目。但是，我想，如果收集的项目是合理的，那么将它们全部加载到客户端将会起作用。 – Kevin 2011-06-03 13:31:50

正确的，如果不是，那么你将不得不公开某种接口或者你通过一个过滤器，或者每个* box类型的接口*，然后在服务器级进行过滤。 – idbentley 2011-06-03 15:12:41

这很有帮助，但我仍然不确定是否需要“模拟”我的实际菜单。例如，创建模型和相关视图来表示实际菜单和菜单项自身的状态和UI。现在我会继续努力通过一些选项。谢谢！ – Kevin 2011-06-03 16:17:25

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

回答

相关问题