Bootstrap3のmodalをknockout.jsと連携させて表示する - Qiita
Bootstrapでいろいろやると結局DOM操作になる… Modalに宛てるViewModelを定義しても、表示するのは結局jQueryを使っていたりしてどうにも趣味じゃなかったので、多少見た目がよくなるようにと思ってカスタムバインディングを作ってみました。 ハンドラーを定義する モーダルは閉じる用のボタンを押したりしなくても閉じることがあるので、万が一ViewModelを通じて表示・非表示の操作が行われた場合のことも考慮して、表示・非表示のコールバックイベントを使って状態を変更する処理も定義しておきます。 ko.bindingHandlers.bs_modal = { init: (element, valueAccessor) -> # モーダルの表示・非表示の際に状態を変化させる $(element).on 'shown.bs.modal', -> value = valueAcce
Knockout.jsで動的に生成したhtmlに対してbindingする - Qiita
Knockout.jsで、Ajaxで取得したhtmlに対してbindingしたい場合がありました。 うまくいったのでメモを残しておきます。 どうしてそんなことをしたくなったのか？ 新規作成と編集のフォームを作りたかったのだけれど、Railsのモデルが複雑に絡んだformをKnockout.jsで制御するのはちょっと難しかったため（Knockout.jsを介してのformの投稿先、methodの変更などは面倒かなと…）、なるべくRailsの世界で完結するようにしたかったので動的にformを取ってくることにしました。 しかし、フォームの簡易的な検証機能はKnockout.jsを使いたい、という感じです。 簡単にはできない シンプルに$.getでformを取得してしまえば成立するかと思いましたが、これだとbindingは有効になりませんでした。
Knockout.js使ってるとHTML5の属性が効かない場合はexntederを使おう - Qiita
<input type="number" name="foo" min="0" data-bind="textInput: foo"> マイナスを入力できないようにしたかったため、min="0"を設定していたのだが、実際にはマイナスにできてしまった…。たぶんmax属性を使っても上限を突破するようなことが起きるんじゃないだろうか。 対処方法 コメントで教えていただいたのだが、入力値の強制などはextenderで対応したほうがいいということだったため、再実装してみた。たしかにこのほうが汎用的でよさそう。 コメントをいただいた後に実装した方法 # 整数を強制するko拡張を定義 ko.extenders.integer = (target, bool) -> return target unless bool result = ko.pureComputed( read: target, writ
bind前にViewが見えてしまう問題への解決方法 - Qiita
Knockout.jsにしろ、それ以外のJavaScriptのMVVMにしろ、bind前にViewがチラッと見えてしまうことがありますね。あれをなんとかしたいなーと思っていたので、その解決方法についてです。 アプローチ1: ViewModelがbindされるまで隠す(View単位) .ko-hiddenというcssのクラスを作って、隠してしまう作戦です。
Knockout.jsで動的なselectのデフォルト値を設定する - Qiita
ものすごくハマったので、メモ。 Knockout.jsでselectを作るのはお手軽で、デフォルト値を設定するのもvalueを使うだけでいいのですが、Ajaxで取得したJSONを使ってフォームを更新しようとしたところ、デフォルトの値が設定されなくて困りました。 Before まずはView #new_foo data-bar_id="1" select.select.form-control( name="foo[bar_id]" data-bind="options: bars, optionsText: 'name', optionsValue: 'id', optionsCaption: '選択してください', value: default_bar_id") class window.BarViewModel constructor: (bar_id)-> @bars = ko.ob
Bootstrapでオートコンプリートを行う - Qiita
jquery-uiを使ってオートコンプリートをしていたところがbootstrap3導入によってぶっ壊れたので、bootstrapの流儀に則ったオートコンプリートで実装し直そうと思って調べてみました。 調査段階 bootstrap3-typeahead これを使ってみようとしたのですが、マルチバイト文字だとうまく動かない…？ あまり情報がなかったので、とりあえず放置しました。 typeahead.js twitter-bootstrapだった頃のものっぽいのでどうなんだろう？と思いましたが、これを採用しました。 cssはtypeahead.js-bootstrap3.lessから拝借しました。 typeahead.jsにはcssが含まれてないので、ここで多少つまりました。 typeahead.jsの使い方 typeahead.jsは、BloodhoudとTypeaheadの2つで構成されてい
Knockout.jsのコンポーネント化を劇的に簡単にする方法 - Qiita
Knockout.jsって便利だなーとめっちゃ思っているのですが、bindingする範囲の管理に困っていました。そこに対する解決策というか解決案です。 今まで Knockout.jsでは、管理の範囲をid要素指定で限定することができますが、把握するのが大変です。 # #foo内でbindingする。 ko.applyBindings(view_model, docuemnt.getElementById('foo')) これだと#foo内の要素とかに間違えてbindingしたりすると重複bindingでエラーになります。あとDOMが辛いのにDOMで範囲を指定するのがダサいですね…。 やはりコンポーネント化か。しかし… @sukobutoさんにtwitterで教えてもらったのですが、コンポーネント化して管理するのがよさそうです。 @patorash 全体を管理する AppViewModel
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
