いつもお世話になっております。
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に反映されていないようです。
ご教授いただけると幸いです。
よろしくお願いいたします!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/11 06:12