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 - 幫助靜態菜單的方法

回答

相關問題