いまさらながらKnockoutJSに入門してみた - フォームバリデーション - /var/log/laughingman7743.log
RestAPIとJavaScriptによるシングルページのアプリではなく、基本的にサーバサイドのテンプレートエンジンをガッツリ利用する形で、 フォームのリアルタイムバリデーションを低コストで実現したかったので、いまさらながらKnockoutJSに入門してみました。 (Vue.jsも合わせてさわってみましたが、複数項目のバリデーションができなさそうだったのでKnockoutJSを使うことに) フォームバリデーション以外はおそらく書かないのであしからず。。。 Knockout Validation*1を利用します。 基本的なバリデーションについてはドキュメントを見れば簡単にできるので割愛。実践的な例を。 Bootstrapでエラー表示 Bootstrapの場合、input自体にクラスを追加してもエラー表示とならないので少し工夫が必要です。 といっても簡単にできて、バリデーション初期化時の設定で
knockout.jsのclick bindingとcss bindingにおける注意点 - Team Duet公式ブログ
knockout.jsのdata bindingについての注意点を記述します。 以下の様なHTMLコードがあります。 <ul data-bind="foreach:palette_array"> <li data-bind="click:$parent.select_color.bind($parent),css:$parent.palette_selected($data)"></li>//（式１） </ul>対応するJavaScriptのコードは以下の通りです。 dotframe.prototype.select_color=function(color){ var index=this.palette_array.indexOf(color); this.palette_seled_index(index); }; dotframe.prototype.palette_selecte
ko.utils（配列編） - 418 | I'm a teapot
これはKnockoutJSアドベントカレンダーの記事です。 KnockoutJS Advent Calendar 2014 - Qiita 今日は Knockout の便利機能が入った ko.utils について適当に紹介します。 今回は配列編。 紹介するのは以下のメソッドです。 ko.utils.arrayForEach ko.utils.arrayFirst ko.utils.arrayFilter ko.utils.arrayGetDistinctValues ko.utils.arrayMap ko.utils.arrayPushAll ko.utils.arrayRemoveItem ちなみにソースコードはここです。 https://github.com/knockout/knockout/blob/master/src/utils.js ko.utils.arrayForEac
[Knockout.js基本編]View側での関数の使い方まとめ｜もっこりJavaScript｜ANALOGIC（アナロジック）
関数の実行結果をバインディングに渡す ループ内でViewModelに属する関数を使う際の注意 バインディングにイベントハンドラを追加 イベントハンドラに任意の引数を渡す２つの方法 Knockout.jsでは、View(HTML)側のバインディングに対してViewModelオブジェクトのプロパティだけではなく、JavaScriptの関数を用いることもできます。例えばtextバインディングに関数の実行結果を渡したり、clickバインディングにイベントハンドラを関連付けたりすることが可能です。 今回は、そのようなView側での関数の使い方についてまとめてみました。 関数の実行結果をバインディングに渡す ■引数なしでの呼び出し まずは最も基本的なケースで、ViewModelオブジェクトに属する関数（ViewModelオブジェクトのメソッド）を引数無しで呼び出し、その実行結果をバインディングに渡す例
Knockout.jsの初期値をDOMから取得する - けさらんぱさらん
Knockout.jsを使うときにたまに困るのがDOMの値を初期値にしたい時です。 なんか地道にJQueryでデータを取得してプロパティに代入してたのですが ちょっと調べてみたらカスタマイズしてDOMからデータを取得することができました。 いろいろやり方はあるのでしょうが、私はこんな感じで実装してみました。 ko.bindingHandlers.valueWithInit = { init: function (element, valueAccessor, allBindingsAccessor, data, context) { var property = valueAccessor(), value = element.value; property(value); ko.bindingHandlers.value.init(element, valueAccessor, allB
Knockout.js 使い方メモ - Qiita
Knockout.js を勉強したときのメモ。 Knockout.js とは クライアントサイドの JavaScript MVVM フレームワーク。 Backbone.js と比べると、データバインディングなどの機能が備わっているなどやや高機能で、 Angular.js と比べると機能が少ない分簡潔で覚えることが少なく、かつ軽量という特徴がある。 Hello World インストール 公式サイト より js ファイルをダウンロードする。 実装 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="knockout-3.2.0.js"></script> <script src="sample.js"></script> </head> <body> <h1 data-bind="text: message">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
conditional-knockout-validation-example - JSFiddle - Code Playground
conditional-knockout-validation-example - JSFiddle - Code Playground
Refreshing list after ajax call with Knockout JS
How to use knockout to iterate over an object (not array)
jQuery inArray()'s return values
Passing values to ko.computed in Knockout JS
knockout js bind class to the result of a function
KnockoutJs : Toggling CSS class
ko.computed with passed argument shows function, but not a value
Get index of the clicked element in knockout
Always Fire Observable Event on Same Value with Knockout.js without ValueHasMutated
Working with checkboxes in knockoutjs - JSFiddle
30kidz/knockout-popup · GitHub