いつも大変お世話になっております。
ただいまBackbone.jsの勉強をしています。
たぶんViewとCollectionは非同期の関係にあると思うのですが
モデル・コレクション
lang
1 /** 2 * モデルの設定 3 */ 4 Mall.Entities.ModelYuubin = Backbone.Model.extend({ 5 // キーを設定 6 idAttribute: "yuubinbangou" 7 }); 8 9 /** 10 * コレクションの設定 11 */ 12 Mall.Entities.CollectionYuubin = Backbone.Collection.extend({ 13 model:Mall.Entities.ModelYuubin, 14 url:JSON_URL, 15 sync:function(method,model,options){ 16 if(method==='read'){ 17 options.type = 'POST'; 18 options.data={ 19 APPNAME:'Mall', 20 PRGNAME:'M0010' 21 } 22 } 23 Backbone.sync(method,model,options); 24 }, 25 initialize:function(){ 26 } 27 });
コントローラー
lang
1 // 一覧用コントローラー 2 Mall.M0010.List.Controller = { 3 listYuubin:function(){ 4 var yuubins = Mall.application.request('yuubin:entities'); 5 6 var yuubinListView = new Mall.Views.M0010.List.YuubinListView({ 7 collection:yuubins 8 }); 9 Mall.application.mainRegion.show(yuubinListView); 10 } 11 };
ビュー
lang
1 /** 2 * 郵便番号を表示するためのビュー(要素) 3 */ 4 Mall.Views.M0010.List.YuubinView = Marionette.ItemView.extend({ 5 tagName:'tr', 6 className:'yuubinContainer', 7 template:'#tpl-list', 8 }); 9 /** 10 * 郵便番号を表示するためのビュー(コンポジットビュー) 11 */ 12 Mall.Views.M0010.List.YuubinListView = Marionette.CompositeView.extend({ 13 template:'#tpl-main', 14 childView:Mall.Views.M0010.List.YuubinView, 15 emptyView:Mall.Views.M0010.List.YuubinViewEmpty, 16 childViewContainer:'tbody' 17 });
こちらのコレクションを渡して一覧表示するプログラムはきちんと動きます。
サーバー側で2秒ほどディレイをかけて遅延させても大丈夫です。
ただし、一覧表示をクリックした場合に詳細を表示させるプログラムがきちんと動作しません。
lang
1// モデル表示コントローラー 2 Mall.M0010.Show.Controller = { 3 showYuubin:function(id){ 4 // コレクションを取得 5 var yuubins = new Mall.Entities.CollectionYuubin(); 6 yuubins.fetch(); 7 // モデルを取得 8 var model = yuubins.get(id); 9 var yuubinShowView; 10 // モデルを渡して画面描画 11 yuubinShowView = new Mall.Views.M0010.Show.Yuubin({ 12 model:model 13 }); 14 Mall.application.mainRegion.show(yuubinShowView); 15 } 16 }; 17 18 19
ビュー
lang
1 /** 2 * 郵便番号 単体表示 3 */ 4 5 Mall.Views.M0010.Show.Yuubin = Marionette.ItemView.extend({ 6 template:'#tpl-show', 7 });
テンプレート
lang
1 <script type="text/template" id="tpl-show"> 2 <table class="table"> 3 <tr> 4 <th>郵便番号</th> 5 <td><%= yuubinbangou %></td> 6 </tr> 7 <tr> 8 <th>住所</th> 9 <td><%= zyuusyo %></td> 10 </tr> 11 </table> 12 </script>
モデルのデータがないのか
Uncaught ReferenceError: yuubinbangou is not defined
と出てしまいます。
一覧表示だと少し待っても(サーバー側で待たせてある)正しく表示されるのですが詳細画面だとサーバー側で待たせなくてもエラーが出てしまいます。
フェッチされる前に画面描画されるというか、フェッチされても画面が更新されない感じです。
フェッチ後すぐにコンソールでコレクションの中身を見てみると1行目lengthは0なのに3行目のlengthは10とあります。
ここあたりにも問題ありそうですが、一覧参照でも同じ結果が出ました。
![イメージ説明]WIDTH:600
ご教授お願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。