いまさらながらKnockoutJSに入門してみた - フォームバリデーション - /var/log/laughingman7743.log
RestAPIとJavaScriptによるシングルページのアプリではなく、基本的にサーバサイドのテンプレートエンジンをガッツリ利用する形で、 フォームのリアルタイムバリデーションを低コストで実現したかったので、いまさらながらKnockoutJSに入門してみました。 (Vue.jsも合わせてさわってみましたが、複数項目のバリデーションができなさそうだったのでKnockoutJSを使うことに) フォームバリデーション以外はおそらく書かないのであしからず。。。 Knockout Validation*1を利用します。 基本的なバリデーションについてはドキュメントを見れば簡単にできるので割愛。実践的な例を。 Bootstrapでエラー表示 Bootstrapの場合、input自体にクラスを追加してもエラー表示とならないので少し工夫が必要です。 といっても簡単にできて、バリデーション初期化時の設定で
完敗だぜ！knockoutでノックアウト - Observable編2 | 株式会社ヌーラボ(Nulab inc.)
みなさんこんにちは。江口です。 今回は、Observable が提供している様々な拡張機能について紹介します。 Knockout のバージョンは執筆時点で最新の安定版の 2.3.0 です。 Observable の拡張 すべての種類の observbale には拡張機能を追加する機能が提供されています。この機能を利用すると、observable に対して新しいプロパティを追加したり、サブスクリプション関数を追加するといった処理をあらかじめ拡張機能として定義し、observable に組み込むことが可能になります。 拡張機能は、次の手順で利用する事ができます。 ko.extenders に拡張機能を定義する observable.extend メソッドで拡張機能を呼び出す 例として、バリデーション機能を observable に追加するような拡張機能を作成してみましょう。 次のようなコードで
knockout.jsのvalue bindingの注意点 - Team Duet公式ブログ
knockout.jsのvalue bindingの注意点をまとめます。 <input data-bind="value:new_image_width">（式１）<input data-bind="value:new_image_width()">（式２）この２つの記述方法の違いです。inputタグの初期値としてnew_image_width observableの値を表示するという動作は２つとも同じです。 しかし、このinputタグにユーザが入力を行うと（式１）ではnew_image_width observableに値が格納されますが、（式２）では格納されません。 var valueUpdateHandler = function() { elementValueBeforeEvent = null; propertyChangedFired = false; var modelVa
Knockout.js の Mapping プラグインを使ったら凄く捗った件 - しばやん雑記
めっちゃ久しぶりに Knockout.js の話です。最近、仕事で再び使い始めたので Tips 的なものが貯まってきたら、こうやってちょいちょい書いていきます。 Knockout : Home ASP.NET MVC 側で持っているモデルをそのまま JSON にして Knockout.js に流し込みたかったのですが、いちいち JavaScript 側でも同じ構造を持ったモデルを作るのは非常に面倒なので、今回は Knockout.js に用意されている Mapping プラグインを使ってみました。 Mapping プラグインのドキュメントは公式サイトで提供されています。 Knockout : Mapping プラグイン本体は GitHub からダウンロードできます。Knockout.js の最新バージョンは 3.1.0 なので互換性を心配しましたが、今のところは特に問題なく使えています。
Knockout.js の if と visible は似ているようで違うので注意 - しばやん雑記
Knockout.js の if と visible は見た目的には要素の表示・非表示を切り替えるので大差ないですが、DOM 的には大きく仕組みが異なっています。 簡単な例で挙動の差を見ていきます。 <span data-bind="if: flag">ほげほげ</span> ↓ タグの中身が空っぽの状態になる <span></span> if の場合は flag が true になったタイミングで、Knockout.js が初回読み込み時に複製しておいたノードを span の下に追加するようになっています。 <span data-bind="visible: flag">ほげほげ</span> ↓ 要素はそのままだけど、スタイルで非表示にしている <span style="display: none;">ほげほげ</span> visible の場合は flag が true になったタ
KnockoutJSで、整形された数値入力をする方法 - Qiita
こんなやつ： http://jsfiddle.net/MKGaru/xd9vs2zp/ 入力フォームで数値を入力させる際、 小数点以下は 何位まで～ とか ３桁ごとに、 カンマで区切りたい とか 正の整数だけにしたい とか いろいろな要求が出てくることがある。 HTML5の input type=number とvalidationだけでは対応できないことが多いし、そもそも対応ブラウザが少なすぎる。 ほしかった機能次のとおり。 機能 IMEの状態に関係なく、半角数値として入力 小数点何位まで扱うか 、 またその際の値丸め（四捨五入等）の設定 ３桁毎の区切り文字の指定 小数点の区切り文字の指定 正の数のみ または 負の数のサポート の設定 prefixの指定 suffixの指定 0 と 未入力の区別 これを実装してみた 依存 knockout.js knockout-es5 (単純にko.c
Knockout.js 3.2.0 がリリースされたので新機能について一通り調べてみた - しばやん雑記
最近はあまり Knockout.js についてブログを書いてませんが、超特大なアップデートを含む 3.2.0 がリリースされたので、新機能について調べておきました。 Knockout 3.2.0 released - Steve Sanderson’s blog - As seen on YouTube™ それぞれの新機能について紹介していきます。 Components Components は個人的には ASP.NET のサーバーコントロールとか MVC の部分ビューが近い気がしてます。HTML と ViewModel というペアを 1 つのコンポーネントとして扱えるようになるので、今まで以上に簡単に再利用可能なパーツとして定義できます。 サンプルとして、はてなブックマークのエントリ情報を読み込むようなコンポーネントを作ってみました。 レンダリングするコンポーネントは、新しく追加された
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">
Knockout.js と ASP.NET MVC の組み合わせ時にモデルバインディングが腐る件 - しばやん雑記
今日も Knockout.js を使って ASP.NET MVC に POST するようなコードを書いていたのですが、モデルバインダが意図したとおりに値をバインドしてくれない時がありました。 まずは ASP.NET MVC 側のコードを見ていきましょう。難しいことはしてません。 public class ChildFormModel { public string Name { get; set; } } public class FormModel { public string Name { get; set; } public List<ChildFormModel> Items { get; set; } } [HttpPost] public ActionResult Post(FormModel model) { return Json(true); } 簡単にコードを紹介する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Knockout-Contrib/Knockout-Validation: A validation library for Knockout JS
Knockout.js templates and jQuery-File-Upload
ドキュメントKnockout.js