0

我正在开发一个应用程序，让我们的安全调度员更新包含当前道路和校园状况的页面。后端是一个 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 到服务器。

欢迎提出建议！

4

1 回答 1

0

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")
于 2012-04-24T14:36:55.190 回答