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

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

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

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

JavaScript

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

Q&A

2回答

4045閲覧

knockout jsで複数のcssを指定する方法

MasakazuFukami

総合スコア1869

Knockout.js

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

JavaScript

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

0グッド

0クリップ

投稿2015/10/17 11:33

いつもお世話になっております。
knockoutのcssバインド方法について押してていただきたいです。

今2つの条件式で複数のクラスを付けたいと思っております。

条件1
a === 'sample1'のとき test1クラス
b === 'sample2'のときtest2くらす

この条件を指定するときに

html

1<div data-bind="css: {'test1': a === 'sample1', 'test2': b === 'sample2'}"></div>

というふうに指定しているのですがうまく反映されません。
反映されないというかknockoutのエラーで落ちてしまいます。

こちらどのように解決すればよろしいでしょうか。
ご教授お願い致します。

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

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

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

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

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

guest

回答2

0

元のコードをよく読んでいましたが、aとbがバインディングされたViewModelのメンバーになっておらず、undefined variableエラーで落ちているんじゃないでしょうか。
例えば、ViewModel側に次のようなコードが無いのではないか、ということです。

JavaScript

1this.a = 'foo'; 2this.b = 'bar';

また、このくらいの処理であれば、もうバインディング記述ではなくViewModelに書いた方が良いのではないでしょうか。

HTML

1<div data-bind="css: computedClass"></div>

JavaScript

1function computedClassImpl() 2{ 3 if (a === 'sample1') 4 { 5 return 'test1'; 6 } 7 else if (b === 'sample2') 8 { 9 return 'test2'; 10 } 11 else 12 { 13 return ''; 14 } 15} 16this.computedClass = ko.computed(computedClassImpl);

投稿2015/10/17 13:01

編集2015/10/17 13:15
hiroshitoda

総合スコア12

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

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

0

使ったことが無いので自信がないですが、インタラクティブチュートリアルのページで試したところ、書かれているコードと同じようなもので動作しました。
チュートリアルページ
View(HTML)に

HTML

1<div data-bind="css: {'test1': firstName === 'Bert', 'test2': lastName === 'Bertington'}">aaa</div>

View Model(Java Script)に

javascript

1function AppViewModel() { 2 this.firstName = "Bert"; 3 this.lastName = "Bertington"; 4} 5ko.applyBindings(new AppViewModel());

のように書いて、OutPutのRunをクリックすると、該当divにtest1 test2のスタイルが付加されます。

というわけで、動作しない原因はもしかすると別のところにあるのではないでしょうか?
実行するための準備は正しく行えていますでしょうか?
例えばViewModel の作成や、Knockoutの起動が正しく行えていないということはありませんか?
参考ページ

投稿2015/10/17 12:43

編集2015/10/17 12:44
hirohiro

総合スコア2068

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問