いつもお世話になっております。
knockout jsの使い方についてお聞きしたいです。
最後に記述してあるhtmlを保存してブラウザで見ていただくと下の画像のように表示されると思います。
使用しているjsライブラリ
・knockout js
・knockout mapping plugin
やりたいこと
・test**の右の四角を押すと色が反転
(adotedというパラメータを使って制御。adoptedがtrueの場合、is_activeというクラスがつくようにしており、それに色の制御がついています)。
・クリックしたもの以外の要素の色を反転。(クリックしたもの以外のオブジェクトのadoptedをfalseにする)
上の3つと下の3つは別々に動作する。
具体的には
初期値が
javascript
1var users = [ 2 { 3 list: [ 4 { 5 arr: [ 6 { adopted: false, text: 'test11'}, 7 { adopted: true, text: 'test12'}, 8 { adopted: false, text: 'test13'} 9 ] 10 }, 11 { 12 arr: [ 13 {adopted: false, text: 'test21'}, 14 {adopted: true, text: 'test22'}, 15 {adopted: false, text: 'test23'}, 16 ] 17 } 18 ] 19 } 20 ]
で、test11の右の四角をクリックすると、
test11のadoptedがtrueに、
test12, test13のadoptedはfalseに、
test21,test22, test23のadoptedは変更せずにそのまま
という感じです!
javascript
1var users = [ 2 { 3 list: [ 4 { 5 arr: [ 6 { adopted: true, text: 'test11'}, 7 { adopted: false, text: 'test12'}, 8 { adopted: false, text: 'test13'} 9 ] 10 }, 11 { 12 arr: [ 13 {adopted: false, text: 'test21'}, 14 {adopted: true, text: 'test22'}, 15 {adopted: false, text: 'test23'}, 16 ] 17 } 18 ] 19 } 20 ]
クリックしたもののadoptedを反転させるのはできたのですが、その他の要素のadoptedを変更する方法がわかりません。
ご教授お願い致します。
下に保存していただくとすぐに検証できるコードを用意させていただいております。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <!-- knockoutjs from cdn --> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> 7 <!-- knockoutjs mapping plugin --> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> 9 <style> 10 .btn{ 11 display: inline-block; 12 width: 20px; 13 height: 20px; 14 background:#ccc; 15 } 16 .btn.is_active{background: red;} 17 </style> 18 <title>knockout</title> 19</head> 20<body> 21 <div data-bind="foreach: users" id="js-users"> 22 <!-- ko foreach: list --> 23 <!-- ko foreach: arr --> 24 <div> 25 <span data-bind="text: text"></span> 26 <span class="btn js-btn" 27 data-bind="css: adopted ? 'is_active' : '', 28 click: radioClick"></span> 29 </div> 30 <!-- /ko --> 31 <hr> 32 <!-- /ko --> 33 </div> 34 <script> 35 var users = [ 36 { 37 list: [ 38 { 39 arr: [ 40 { adopted: false, text: 'test11'}, 41 { adopted: true, text: 'test12'}, 42 { adopted: false, text: 'test13'} 43 ] 44 }, 45 { 46 arr: [ 47 {adopted: false, text: 'test21'}, 48 {adopted: true, text: 'test22'}, 49 {adopted: false, text: 'test23'}, 50 ] 51 } 52 ] 53 } 54 ] 55 56 var radioClick = function(data) { 57 console.log(data.adopted); 58 data.adopted = data.adopted ? false : true; 59 ko.mapping.fromJS(users, viewModel); 60 } 61 62 var js_translation_wrapper = document.getElementById('js-users'); 63 var viewModel = ko.mapping.fromJS(users); 64 65 ko.applyBindings(viewModel, js_translation_wrapper); 66 67 </script> 68</body> 69</html>
よろしくお願いいたします!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。