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

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

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

KnockoutJSは、Model-ViewView-Model(MVVM)を用いたダイナミックなHTML ULのためのオープンソースのJavaScriptライブラリです。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3335閲覧

knockout jsでネストした中の配列に追加

MasakazuFukami

総合スコア1869

Knockout.js

KnockoutJSは、Model-ViewView-Model(MVVM)を用いたダイナミックなHTML ULのためのオープンソースのJavaScriptライブラリです。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/08/11 01:48

いつもお世話になっております。

knockoutjsを使ってviewのデータバインディングを行っているのですが、ネストした中の配列を更新しようとしてもviewに反映されません。
配列には追加されています。

調査した結果、knockoutのmapping pluginで実現できそうなのですが力及ばず、うまくできません。。。

以下ソースコードになります。
(knockoutjsとknockoutのプラグインを読み込んでいます!)
このままローカルに保存していただくとデバッグできる状態にしています!

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <!-- knockoutjsをcdnから読み込む --> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> 7 <!-- knockoutjsのmappingプラグイン --> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> 9 10 <title>knockout</title> 11</head> 12<body> 13 <div data-bind="foreach: arrays" id="js-arrays"> 14 <!-- ko foreach: list --> 15 <!-- ko foreach: arr --> 16 <div data-bind="text: $data"></div> 17 <!-- /ko --> 18 <button data-bind="click: $parent.addChildArray">追加</button> 19 <hr> 20 <!-- /ko --> 21 </div> 22 <script> 23 var arrays = [ 24 { 25 list: [ 26 { 27 arr: ['test11', 'test12', 'test13'] 28 }, 29 { 30 arr: ['test21', 'test22', 'test23'] 31 }, 32 { 33 arr: ['test31', 'test32', 'test33'] 34 }, 35 { 36 arr: ['test41', 'test42', 'test43'] 37 } 38 ], 39 addChildArray: function(data) { 40 this.arr.push('added array'); 41 console.log(this.arr); 42 } 43 } 44 ] 45 46 var js_translation_wrapper = document.getElementById('js-arrays'); 47 var tableViewModel = ko.mapping.fromJS(arrays); 48 49 ko.applyBindings(tableViewModel, js_translation_wrapper); 50 51 </script> 52</body> 53</html>

追加ボタンを押すとadded arrayという文字列が配列に追加され、それをviewに反映したいです。
一応ボタンを押した際のclickのイベントにconsole.logを仕込んでおり、そのログを見ると、配列には追加されているのですがviewに反映されていないようです。

ご教授いただけると幸いです。
よろしくお願いいたします!

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

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

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

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

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

guest

回答1

0

ベストアンサー

このままローカルに保存していただくとデバッグできる状態にしています!

すばらしい!

arraysを配列からオブジェクトにし、それに伴いjs-arraysのdata-bindを外したところ、うまく動きました。
(console.logのところも少し変えています)

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <!-- knockoutjsをcdnから読み込む --> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> 7 <!-- knockoutjsのmappingプラグイン --> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> 9 10 <title>knockout</title> 11</head> 12<body> 13 <div id="js-arrays"> 14 <!-- ko foreach: list --> 15 <!-- ko foreach: arr --> 16 <div data-bind="text: $data"></div> 17 <!-- /ko --> 18 <button data-bind="click: $parent.addChildArray">追加</button> 19 <hr> 20 <!-- /ko --> 21 </div> 22 <script> 23 var arrays = { 24 list: [ 25 { 26 arr: ['test11', 'test12', 'test13'] 27 }, 28 { 29 arr: ['test21', 'test22', 'test23'] 30 }, 31 { 32 arr: ['test31', 'test32', 'test33'] 33 }, 34 { 35 arr: ['test41', 'test42', 'test43'] 36 } 37 ], 38 addChildArray: function(data) { 39 this.arr.push('added array'); 40 console.log(this.arr()); 41 } 42 } 43 44 var js_translation_wrapper = document.getElementById('js-arrays'); 45 var tableViewModel = ko.mapping.fromJS(arrays); 46 47 ko.applyBindings(tableViewModel, js_translation_wrapper); 48 49 </script> 50</body> 51</html>

投稿2015/08/11 04:57

alg

総合スコア2019

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

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

MasakazuFukami

2015/08/11 06:12

お褒めいただいてありがとうございます! すぐにデバッグできるようにこうしました!(笑) 単純な問題ですね。。。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問