Backbone？ Can.js？貧民窟DIY？我應該如何處理這些數據？

Question

我正在研究一個應用程序，讓我們的安全調度員更新包含當前道路和校園條件的頁面。後端是的NodeJS /快遞堆棧和數據是一個簡單的JSON結構看起來是這樣的：

{ 
    "campus": {"condition": "open", "status": "normal"}, 
    "roads": {"condition": "wet", "status": "alert"}, 
    "adjacentroads": {"condition": "not applicable", "status": "warning"}, 
    "transit": {"condition": "on schedule", "status": "normal"}, 
    "classes": {"condition": "on schedule", "status": "normal"}, 
    "exams": {"condition": "on schedule", "status": "normal"}, 

    "announcements" : "The campus is currently under attack by a herd of wild velociraptors. It is recommended that you do not come to campus at this time. Busses are delayed.", 

    "sidebar": [ 
     "<p>Constant traffic updates can be heard on radio station AM1234. Traffic updates also run every 10 minutes on AM5678 and AM901.</p>", 
     "<p>This report is also available at <strong>555-555-1234</strong> and will be updated whenever conditions change.</p>" 
    ], 

    "links": [ 
     { 
      "category": "Transportation Links", 
      "links": [ 
       { 
        "url": "http://www.localtransit.whatever", 
        "text" : "Local Transit Agency" 
       }, 
       { 
        "url": "http://m.localtransit.whatever", 
        "text" : "Local Transit Agency Mobile Site" 
       } 
      ] 
     }, 
     { 
      "category": "Weather Forecasts", 
      "links": [ 
       { 
        "url": "http://weatheroffice.ec.gc.ca/canada_e.", 
        "text" : "Environment Canada" 
       }, 
       { 
        "url": "http://www.theweathernetwork.com", 
        "text" : "The Weather Network" 
       } 
      ] 
     }, 
     { 
      "category": "Campus Notices &amp; Conditions", 
      "links": [ 
       { 
        "url": "http://www.foo.bar/security", 
        "text" : "Security Alerts &amp; Traffic Notices" 
       }, 
       { 
        "url": "http://foo.bar/athletics/whatever", 
        "text" : "Recreation &amp; Athletics Conditions" 
       } 
      ] 
     }, 
     { 
      "category": "Wildlife Links", 
      "links": [ 
       { 
        "url": "http://velociraptors.info", 
        "text" : "Velociraptor Encounters" 
       } 
      ] 
     } 

    ], 

    "lastupdated": 1333151930179 
} 

我不知道這個數據在客戶端工作的最好的辦法是什麼（例如在調度員用來更新數據的頁面上）。該頁面是選擇（校園，道路等條件），TinyMCE textareas（公告和邊欄）和文本輸入（鏈接）的混合。如有必要，我願意改變這種數據結構，但在我看來工作得很好。我一直在看Backbone和Can.JS，但我不確定這些是否適合這一點。

一些額外的信息：

• 沒有必要來更新數據結構separatly中的個別項目;我計劃在保存後發佈整個結構。這就是說...
• 實際上有兩種不同的觀點，一個是調度員，另一個是他們的主管。調度員只能通過下拉菜單改變校園，道路等條件，而且只能改變「條件」鍵;每種可能的情況都有一個默認狀態分配給它。主管可以覆蓋默認狀態，並可以訪問公告，邊欄和鏈接鍵。也許我確實需要重新考慮以前關於一次性發布整個事情的觀點？
• 主管需要能夠添加和刪除鏈接，以及添加和刪除整個鏈接類別。這意味着需要添加和刪除DOM元素，這就是爲什麼我想要使用Backbone或Can.js之類的東西，而不是寫一些貧民區解決方案來查看所有表單元素並生成相應的JSON以POST服務器。

意見建議歡迎！

Answer 1

CanJS在嵌套數據方面效果很好。 can.Model繼承了can.Observe，它允許您偵聽對象結構中的任何更改。

如果包括can.Observe.Delegate你有更強大的事件機制（例如，從文檔）：

// create an observable 
var observe = new can.Observe({ 
    name : { 
    first : "Justin Meyer" 
    } 
}) 
    var handler; 
//listen to changes on a property 
observe.delegate("name.first","set", 
    handler = function(ev, newVal, oldVal, prop){ 

    this //-> "Justin" 
    ev.currentTarget //-> observe 
    newVal //-> "Justin Meyer" 
    oldVal //-> "Justin" 
    prop //-> "name.first" 
}); 

// change the property 
observe.attr('name.first',"Justin")