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 を見てきましたが、どちらがこれに適しているかはわかりません。

いくつかの追加情報:

  • データ構造内の個々の項目を個別に更新する必要はありません。保存したら、構造全体を POST する予定です。それは言った...
  • 実際には 2 つの異なるビューがあります。1 つはディスパッチャー用で、もう 1 つはスーパーバイザー用です。ディスパッチャーは、ドロップダウンを介してキャンパス、道路などの条件を変更する機能のみを持ち、さらに「条件」キーのみを変更できます。考えられる各条件には、デフォルトのステータスが割り当てられています。スーパーバイザーは、デフォルトのステータスを上書きして、アナウンス、サイドバー、およびリンク キーにアクセスできます。一度にすべてを POST することについての前のポイントを再考する必要があるのでしょうか?
  • スーパーバイザーは、リンクの追加と削除、およびリンク カテゴリ全体の追加と削除を実行できる必要があります。これは、DOM 要素を追加および削除する必要があることを意味します。そのため、すべてのフォーム要素を調べて適切な JSON を構築して POST するゲットー ソリューションを作成するだけでなく、Backbone や Can.js などを使用することを考えています。サーバー。

提案を歓迎します！

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 に答える