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

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

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

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

JavaScript

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

Q&A

解決済

1回答

2288閲覧

knockoutjsで自分以外の配列の値を変えたい

MasakazuFukami

総合スコア1869

Knockout.js

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

JavaScript

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

0グッド

0クリップ

投稿2015/08/12 10:19

編集2015/08/12 10:21

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

よろしくお願いいたします!

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

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

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

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

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

guest

回答1

0

自己解決

すいません。
解決しました。

data-bind="click: radioClick"ではなく
data-bind="click: function(data, event){radioClick($parent, data, event)}"
というふうに関数でくくって中で引数を追加することで解決出来ました!

投稿2015/08/12 10:34

MasakazuFukami

総合スコア1869

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問