javascript - Backbone ？可以.js吗？贫民窟DIY？我应该如何处理这些数据？

Question

我正在开发一个应用程序，让我们的安全调度员更新包含当前道路和校园状况的页面。后端是一个 Nodejs/express 堆栈，数据是一个简单的 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 文本区域(公告和侧边栏)和文本输入(链接)。如果有必要，我愿意改变这个数据结构，但在我看来，它工作得很好。我一直在研究 Backbone 和 Can.JS，但我不确定它们是否适合于此。

一些附加信息:

• 无需单独更新数据结构中的单个项目；我计划在保存后发布整个结构。也就是说...
• 实际上有两种不同的观点，一种是调度员的观点，另一种是他们的主管的观点。调度员只能通过下拉菜单更改校园、道路等条件，而且只能更改“条件”键；每个可能的条件都有一个分配给它的默认状态。主管可以覆盖默认状态，并有权访问公告、侧边栏和链接键。也许我确实需要重新考虑之前关于立即发布整个内容的观点？
• 主管需要能够添加和删除链接，以及添加和删除整个链接类别。这意味着需要添加和删除 DOM 元素，这就是为什么我考虑使用 Backbone 或 Can.js 之类的东西，而不是仅仅编写一些 ghetto 解决方案来查看所有表单元素并构建适当的 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")