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

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

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

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

Q&A

解決済

1回答

2233閲覧

knockoutjsで不可解なこと…

退会済みユーザー

退会済みユーザー

総合スコア0

Knockout.js

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

0グッド

0クリップ

投稿2015/05/21 05:37

とても便利に使っているのですが、下記の用にコードを書いた所…
理解できない動作になってしまいました。

lang

1initData = 2 data1 : 0 3 data2 : "abc" 4 data3 : "fff" 5 6viewModel = (initData) -> 7 self = @ 8 self.Parts = initData 9 10vm = new viewModel(initData) 11ko.applyBindings(vm)

self.Parts にデータを格納しているので、htmlを次のようにしていました。

lang

1<!-- ko with:Parts --> 2<p data-bind="text:data1"></p> 3<!-- /ko -->

すると「Partsはないエラー」が発生します。

そこで下記のようにするとデータを出力することができました。
しかし、Partsをどこにも指定していません。

lang

1<p data-bind="text:data1"></p>

試しに下記のようにダミーのデータを追加すると表示されなくなりました。

lang

1viewModel = (initData) -> 2 self = @ 3 self.Parts = initData 4 self.Dummy = ''

状況的には「最後に代入されたデータだけ取り出せる」という状態になっています。

使い方の問題かと思うのですが、考え方や運用の間違いなど教えてもらえればと思います。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

謎ですねえ・・・
Coffeeじゃなく素のJavaScriptで↓のように書き直してみましたが、ちゃんと拾えてるっぽいんですが

<!-- -->のコメントとかも含めてHTMLのDOMツリーがおかしい(閉じタグ抜けとか)はないですかね

lang

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>KO Example</title> 6</head> 7<body> 8 9<!-- ko with:Parts --> 10<p data-bind="text:data1"></p> 11<p data-bind="text:data2"></p> 12<p data-bind="text:data3"></p> 13<!-- /ko --> 14 15<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> 16<script> 17(function(){ 18 "use strict"; 19 20 var initData = { 21 data1: 9999, 22 data2: "ABC", 23 data3: "fff" 24 }; 25 var ViewModel = function(data){ 26 var self = this; 27 self.Parts = data; 28 }; 29 var vm = new ViewModel(initData); 30 ko.applyBindings(vm); 31})(); 32</script> 33</body> 34</html>

投稿2015/05/21 05:56

khirose

総合スコア251

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

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

退会済みユーザー

退会済みユーザー

2015/05/21 06:27

コードまで書いていただきありがとうございます。 コードを比較して気がついたことは return の有無でした。 前回のコードはjsは下記のようになっていました。 viewModel = function(initData) { var self; self = this; return self.Parts = initData; }; そこでcoffeescriptでreturnを明示的にしないように設定したところ、 「with:Parts」で制御できるようになりました。 viewModel = (initData) -> self = @ self.Parts = initData return coffeescriptとknockoutjsの合わせ技ってところですね。 この部分で長い時間悩んでいたのですが、解決出来ました。 ありがとうございます。
退会済みユーザー

退会済みユーザー

2015/05/21 06:31

コード部分のスペースが削除されてしまったので書き直します。 ```lang-javascript viewModel = function(initData) { var self; self = this; return self.Parts = initData; }; ``` ```lang-coffeescript viewModel = (initData) -> self = @ self.Parts = initData return ```
退会済みユーザー

退会済みユーザー

2015/05/21 06:32

と、思ったらコメント部分にはコード書けないんですね。orz
khirose

2015/05/21 06:53

return self.Parts = initData; だと、たぶんJavaScriptの仕様的に代入した値(initData)がreturnされちゃいますね なるほど、withをつけずにプロパティ直書きでアクセスできるわけですね 私も勉強になりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問