質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Backbone.js

Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

Q&A

解決済

1回答

2632閲覧

フェッチしても画面が更新されない

YasuoTakemoto

総合スコア31

Backbone.js

Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

0グッド

0クリップ

投稿2015/05/19 07:23

いつも大変お世話になっております。
ただいま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

ご教授お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

モデル、コントローラー側でFetchさせていたものをコントローラー側に移譲。
コントローラー側のFetch内のSuccessにてコレクションを受け取ることで解決いたしました。

lang

1yuubins.fetch({ 2 reset:true, 3 success:function(collection){ 4 var yuubinListView = new Mall.Views.M0010.List.YuubinListView({ 5 collection:yuubins 6 }); 7

投稿2015/05/20 02:22

YasuoTakemoto

総合スコア31

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問