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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1666閲覧

Backbone.jsのCollection内でクリックされたModelを操作する方法

tarotarosu

総合スコア114

Backbone.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/10/13 07:58

編集2016/10/13 08:15

###前提・実現したいこと
最近Backbone.jsを勉強し始めました。

Collectionに対応するViewの中で、クリックされたModelのプロパティを取得することは可能なのでしょうか?
例えばCollectionに対応するViewを「collectionView」としたとき、このcollectionViewに渡すのはCollectionなので、Collection中のクリックされた特定のModelに関する操作はできないですよね?
ですので、「クリックされたModelにのみある処理を行い、Collection内のクリックされたModel以外のModelには別の処理を行いたい」などということをしようと思ったとき、一体どのように実現するのだろうと思いました。
何かご回答を頂けると助かります_(..)

###追記
わかりにくいですが、下図のようなイメージです。
例

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

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

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

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

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

guest

回答1

0

実例があった方がわかりやすいと思うので、backbone.jsの公式サンプルをみてみてください。
Todoリストのサンプル

まず、Collectionは内部でもつModelクラスを指定できます。

js

1var TodoList = Backbone.Collection.extend({ 2 model: Todo, 3......

そしてmodelそれぞれ(コレクション内の要素)に対応するviewをつくります。

js

1var TodoView = Backbone.View.extend({ 2 3 4.......... 5var view = new TodoView({model: todo});

collectionをもっているviewはイベントごとにコレクションの内部まで操作できます。

js

1 var AppView = Backbone.View.extend({ 2 ..... 3 4 this.listenTo(Todos, 'reset', this.addAll); 5 ..... 6 7 8addAll: function() { 9 Todos.each(this.addOne, this); 10},

とりあえずこれで雰囲気つかめたでしょうか。

投稿2016/10/13 08:16

編集2016/10/13 08:18
shoota

総合スコア246

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

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

tarotarosu

2016/10/13 09:38 編集

コメントを投稿する欄を間違えたため編集します。
tarotarosu

2016/10/13 09:37

すみません、コメント間違えました...
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問