KnockoutJSでリストの絞り込みとテキストのハイライトを行う - Qiita
動機 リストの絞り込みのサンプルはあったし、テキストをハイライトするサンプルも見つかった。 しかし両方をこなしているサンプルが見つからなかったから作ってみた。 前提 データ取得は別なのでデータとなる配列はべた書き 絞り込み時には大文字小文字を区別しない コード HTML <div class="content"> <label>検索: <input type="text" class="input_highlight" data-bind="value: searchBrand, valueUpdate: 'afterkeydown'"> </label> <ul data-bind="highlightForeach: {data: filteredBrands, search: searchBrand}"> <li> <a data-bind="attr: {href: url}">
KnockoutJSの紹介 - 418 | I'm a teapot
これはKnockoutJSアドベントカレンダー１日目の記事です。 KnockoutJS Advent Calendar 2014 - Qiita 一発目なので最初は KnockoutJS とはどんなものなのかについて書きたいと思います。 KnockoutJSとはMVVMパターンでJavaScriptで作る動的なUIをシンプルに構築するライブラリです。 ※個人的にはフレームワークではなくライブラリだと思っている 公式サイトには以下のような標語で書かれています。 Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) Knockout : Home KnokoutJSを一言でいえば、「バインディングフレームワーク」の一種です。 以下の特徴があります。 ・他のライブラリ(jQueryなど)に依存しない ・IE 6
Knock Me Out
Hello! Are you currently developing with Knockout? Much has changed in the landscape of client-side libraries since Knockout was considered a popular choice, but there still seem to be many successful projects using it today. I would love to hear about the interesting things that you are building with Knockout in 2019. For the last several years, I have been working with React on the front-end (an
Knockout 3.2.0 released
This one has been slow-cooking since February and it’s good. For the first time in a while, this release focuses on adding some significant new features to Knockout. Almost any developer using KO should seriously consider making use of these, as they can greatly streamline your code. Published Aug 18, 2014 So what’s new? Components Components bring a new and hugely more scalable way of structuring
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 の 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 なので互換性を心配しましたが、今のところは特に問題なく使えています。
Architecting large Single Page Applications with Knockout.js
Last week in Oslo I was lucky enough to attend the fantastic NDC 2014 conference, at which I gave the following talk about using brand-new not-yet-released Knockout.js features, along with Yeoman, Gulp, and Karma to build large single-page web apps in a very modern style (while still retaining backward compatibility all the way to IE 6!). Published Jun 11, 2014 This should be of interest to anyone
Knockout.jsの良いところ - Mainly Devel Notes
Knockout.js(KnockoutJS)は変数を関数として記述しないといけないからめんどくさいという意見があるかと思うので、ここでいくつかメリットを挙げたいという趣旨の投稿です。 AngularとかVueとかちょっと旬なライブラリでは、おそらく内部的にsetter/getterを使うことでKnockoutのような記述をしなくてもいいようにしています。knockout-es5というプラグインを使えばKnockoutでもそういう書き方はできますが、毎回毎回それをやるかというとそれもめんどくさいので個人的にはあまり使わないです。（それにobservableを取り出す記述もめんどくさい） ただそんなKnockoutの記述にもメリットはあるわけで。 1. 関数なので名前に日本語が使える これはプロジェクトによっては重要だったりします。setter/getterを使う仕組みにおいては、JavaS
MVVMフレームワーク「Knockout.js」が超絶便利！！その概要と使いどころなどについて｜もっこりJavaScript｜ANALOGIC（アナロジック）
前置き Knockout.jsとは？ そもそもMVVMパターンとは？ Knockout.jsを使うとどのようにコードが変わるか？ メリット、デメリット サポートブラウザ 使いどころ 私の中のJavaScriptの歴史で、Knockout.js（のっくあうと）との出会いはjQueryを知った時以来の衝撃でした。 ページの再読み込みではなくJavaScriptによるDOMのリフローを頻繁に行うようなWEBアプリケーションを作成する場合、アプリケーションの規模が大きくなるにつれHTMLマークアップとJavaScriptコードが随所で絡み合ってしまい、次第にコードのメンテナンスや機能拡張が困難になっていきます。そんな経験をしたことのある人は結構多いのではないでしょうか。 ここで紹介する「Knockout.js」はそんな問題を劇的に改善してくれるJavaScriptフレームワークです。 本来このブロ
サンプルに惑わされるな！KnockoutでUIエフェクトを使う際のベター・プラクティス - Qiita
<p data-bind="fadeVisible: displayMessage"> 尚、このメッセージは displayMessage プロパティが false になると自動的に消滅する。 </p> function ViewModel() { var self = this; self.displayMessage = ko.observable(true); } $(function() { var vm = new ViewModel(); ko.applyBindings(vm); vm.displayMessage(false); // これでメッセージがフェードアウト }; // jQuery の fadeIn() / fadeout() メソッドを使ってエレメントの 可視/不可視 を切り替える ko.bindingHandlers.fadeVisible = { init
完敗だぜ！Knockoutでノックアウト - 導入編 | 株式会社ヌーラボ(Nulab inc.)
みなさんこんにちは。江口です。 前回のエントリで予告したとおり、今回は MVVM パターンを利用して動的な UI を作成することのできる JavaScript ライブラリ「Knockout」について紹介します。 Knockout とは Knockout は主な特徴として 宣言的バインディング 自動 UI 更新 依存性追跡 テンプレート という4つのコンセプトを謳った JavaScript のライブラリです。このコンセプトの中で特に重要となるのは「宣言的バインディング」と「自動 UI 更新」になります。 この機能を利用することで、下の例のように UI 上の更新したい要素を id や class 属性の指定などを指定して探しだしてから変更するようなコードは必要なくなります。Knockout を使うと ViewModel 内の変数を単純に書き換えるだけで、その変数と結びついた要素が自動的に変更さ
JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
KnockoutJSの長所／短所とAngularJSとの比較 - Qiita
KnockoutJSを使った開発を1年ほど前に行っていました。 元々はプロトタイピングだけに使う予定でしたが、使い勝手が良かったのでそのまま本開発に取り込みました。 最近、少しAngularについても調査をしていたので、Knockoutと比較できる部分も書きだしてみました。 KnockoutJSの長所／短所、そしてAngularJSとの比較となります。 長所：双方向のデータバインディング Knockoutの最大の長所は、間違いなく強力な双方向のデータバインディングと言えます。 この凄さを試したければ本家サイトのExample各種を試すと良いかもしれません（参考URL）。 あるいは自分自身でサンプル・アプリケーションを作るといいでしょう。 すぐに虜になるはずです。 DOMとJSのモデルを紐付けて、整合性をとる処理を全てフレームワーク側が吸収してくれます。 JS側の記述がシンプルになるので、ア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Knockout.js 3.2の新機能Componentsを一足先に使う - Qiita
jasonmore.net
Ideas - O'Reilly Media
Steve Sanderson - Architecting large Single Page Applications with Knockout.js
ドキュメントKnockout.js
Vue.js vs Knockout.js
噂のRactive.jsをKnockout.jsと比べてみた - Qiita
