バックボーン？ 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テキストエリア（アナウンスとサイドバー）、テキスト入力（リンク）を組み合わせたものです。必要に応じてこのデータ構造を変更することは可能ですが、うまくいくと思います。私はバックボーンとCan.JSを見てきましたが、いずれかがこれに適しているかどうかはわかりません。

いくつかの追加情報：

• separatlyデータ構造内の個々のアイテムを更新する必要はありません。私はそれが保存されるときに構造全体をポストすることを予定しています。それは...
• 実際には2つの異なるビューがあります.1つはディスパッチャ用で、もう1つは監督者用です。ディスパッチャは、ドロップダウンを介してキャンパス、道路などの条件を変更する能力しかなく、さらに「条件」キーを変更することができます。可能な各条件には、デフォルトのステータスが割り当てられています。スーパーバイザはデフォルトのステータスを上書きし、アナウンス、サイドバー、およびリンクキーにアクセスできます。たぶん私は一度にすべてのものを投稿するという前の点を再考する必要がありますか？
• スーパーバイザはリンクの追加と削除、リンクカテゴリ全体の追加と削除ができる必要があります。これは、DOM要素を追加したり削除したりする必要があることを意味しています。なぜなら、私はバックボーンやCan.jsのようなものを使用することを考えています。すべてのフォーム要素を見て、POSTする適切なJSONを構築するサーバー。

提案が歓迎されました。

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") 

を