シングルページアプリケーションでの画面の状態変更について

Question

通常のMVCでの開発だとボタンを押下した際にsubmitが走り
サーバーサイドで処理が行われ、画面が再描画されてボタン実行の結果
を画面で表示仕分ける事が多々あると思いますが、
SPAでの開発で同じようにボタンを押下して画面の項目の文言などを変更する際に
どのような方法が良いのでしょうか？全く想像できないのでみなさまの事例を教えていただけると幸いです
非同期なので処理の結果どのような方法で画面項目が変更されるのが一般的なのでしょうか。

内容
ボタンを押すとステータスが変更され、それが画面のラベルとして変更された内容で見える。同様に押したボタンの文言も変更する。

手順
ボタン押下→ボタンの処理でDBの値更新→処理の結果、画面のステータスラベルとボタンの名前を変更する
「登録ボタン」→押下後非同期でDBアクセス→成功の可否でボタンが「登録済み」に横のラベルも「OK」に変更、削除ボタンを押下すると元に戻る

Answer 1

BackboneなどのクライアントMVCで画面項目とModelを紐付けておいて
非同期で処理を投げ、結果を取得したらそれをModelに設定→画面項目が変更される。
などではないでしょうか。

Comments

[enigumalu]

ありがとうございます。調べたところ下記のようにDOM操作自体は行わないけど、Modelにひも付きをつくっておきViewがそれを見て判断するイメージであっていますでしょうか？
>DBから値を得たり、表示用に加工したり、ロジックを書いたりします。
>注意したいのがDOM操作は行なわいということ。
>DOM関連の処理はBackbone.Viewに集約して、
>DOMとは関係のないロジックをBackbone.Modelに書くようにします。
>これはメンテナンス性を上げるためにそうしたほうが良いということです。

[7tsuno]

そうですね、基本的にDOM操作自体は行いません。
Modelと紐付きを作っておく→ViewでModelの操作を行う→変更が自動的に反映される
のような流れになると思います。
BackboneのViewはMVCで言うところのControllerとViewの役割を持っているようなイメージです。

[enigumalu]

ちょっとパターン変わってしまいますが、この場合ボタンを１度押したら２度と出さないような画面で、ボタン押下時データ登録しボタンを表示しているDOMを削除、間髪入れずに登録したデータを同一画面に表示するような挙動に対応できますか？
そもそもSPAでやるような挙動じゃないのかなと思いリロードするしかないかなーと考えているんですが…

[7tsuno]

Backbone.Marionette(Backboneの追加ライブラリのようなもの)にregionというものがあります。
自分も深いところまでは詳しくないのですが、これで実現できるのではないでしょうか？
http://shibe97.tumblr.com/post/88145569527/marionettejs%E5%85%A5%E9%96%80-layout-region%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9