Knockout.jsで大規模開発してみた件について。
筆者の担当していた案件では、Knockout.jsを使って開発していました。 今回はどんな感じで使ってたのか？というのを記事にしたいと思います。 Knockout.jsとは？ MVVM(Model-View-ViewModel)パターンをサポートするフレームワークです。 双方向バインディング云々…書こうとしましたが、こちらを参照したほうが良いでしょう。 わかりやすいです。 ［Knockout］MVVMパターンでアプリケーションを構築する http://www.buildinsider.net/web/bookjslib111/89 どんな案件？ 内容 webviewを使ったスマートフォン向けのアプリ開発。 サポート端末 Android4.0以上 iOS6.0以上 案件規模 フロントエンジニアは5名程度。 コード量 愚直に↓をしてみると、数十万行 $ find . -name "*.js"
Building Large, Maintainable, and Testable Knockout.js Applications | Envato Tuts+
Knockout.js is a popular open source (MIT) MVVM JavaScript framework, created by Steve Sandersen. Its website provides great information and demos on how to build simple applications, but it unfortunately doesn't do so for larger applications. Let's fill in some of those gaps! AMD and Require.js AMD is a JavaScript module format, and one of the most popular (if not the most) frameworks is http://r
Using KO’s native PubSub for decoupled synchronization - Knock Me Out
In the previous post, I suggested some ideas for binding against multiple view models in Knockout.js. When working with more than one view model, a common task is deciding how to communicate between the separate components. Creating direct references between them often doesn’t feel right and can lead you down a path where each view model has lost its independence and cannot be used effectively wit
Knockout.js 3.2 Preview : Components - Knock Me Out
Knockout 3.2 will include some exciting new functionality out-of-the-box to do modular development through creating components. From Knockout’s point of view, a component allows you to asynchronously combine a template and data (a view model) for rendering on the page. Components in Knockout are heavily inspired by web components, but are designed to work with Knockout and all of the browsers that
AngularJS、KnockoutJS、Sencha Ext JSで実装されているデータバインディングの違いをコーディングすることで明らかにする！ - albatrosary's blog
AngularJSを筆頭にKnockoutJSとSencha Ext JSでもデータバインディングが実装されました。この違いを簡単なサンプルを作ることで比較します。JavaScriptフレームワーク選定で個々の特徴を他者から聞き取るだけでなく、実際に同じ機能を様々なフレームワークで実装してみるというのは重要なことと考えます。 比較するプログラム 今回作成するプログラムはテキストボックスを二つ配置しテキストボックスに入力された値を足し、合計を表示するというものを作ります。 仕様は「テキストボックスに入力された値を即時計算し答えを表示する」ということにします。画面の構成は、ここでの評価は意味のないものですので、こだわりなく作成しました。 AngularJSの場合 AngularJSの場合は、JavaScriptを一行も書かずにその仕様を満たすことができます。index.htmlに次の行を記載し
Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル - うなの日記
Knockout + ContainerJS + Require.js で テスタブル にToDoリストを作るチュートリアルです。 ポイント MVVMアーキテクチャでテスタブルに MVVMアーキテクチャを採用し、View(HTML/CSS)とViewModel,Modelを分離。 ViewModel、Modelは HTMLに非依存となるため、単体テストが可能になります。 オブジェクトの生成と依存関係を、DIコンテナで一元管理 DIコンテナを利用して、ViewModel、Modelの生成と関連付けを自動化。 コンポーネント間の結合を疎にでき、テスト時のモックへの差し替えも簡単にできるようになります。 JavaScriptソースはクラスごとに分割管理 1ファイル200行超えたらメンテナンスとか無理ですよね! ということで、ソースファイルはクラスごとに分割管理します。 ソース間の依存関係解決と読
Knockout.jsの概要 | Adobe Developer Connection
Knockout.jsは、モデルデータに対して宣言によって要素をバインドできるようにするJavaScriptライブラリです。このモデルデータでは、UIとモデルの間で自動的に双方向の更新が行われます。Knockoutは簡単に使い始めることができ、他のライブラリやテクノロジーとも密接に統合されています。ここでは、使い始める際に知っておく必要があることについて説明します。 複雑で動的なデータ駆動型のWebアプリケーションを開発することは、難しい作業になる可能性があります。ユーザーインターフェイスとその基になるデータとを常に同期させるには、通常、ユーザーが何かアクションを実行するたびに、または新しいデータが読み込まれるたびに、様々な要素とデータとの間で情報を仲介する多くのイベントハンドラーを作成する必要があります。 Knockoutの登場以前 Knockoutのメリットを示す簡単な方法として、Kn
Angular Js vs Knockout · jsPerf
JavaScript performance comparison Test case created by tim on 2012-11-10 Preparation code <script src="http://code.jquery.com/jquery-1.7.2.min.js"> </script> <script src="http://code.angularjs.org/angular-1.0.1.min.js"> </script> <script src=" http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"> </script> <script> var Ctrl = function($scope) { $scope.data = ""; $scope.numberofCha
Utility functions in KnockoutJS - Knock Me Out
When working with KnockoutJS, there seem to be many common operations that you need to perform on your view model objects. Internally, Knockout has a number of utility functions used by the library itself, but many of these functions might actually be handy for anyone using the library. I wanted to build a sample that highlights a few of my favorite utilities. Handling data from the server One of
Knockout.js incredibly slow under semi-large datasets
I'm just getting started with Knockout.js (always wanted to try it out, but now I finally have an excuse!) - However, I'm running into some really bad performance problems when binding a table to a relatively small set of data (around 400 rows or so). In my model, I have the following code: this.projects = ko.observableArray( [] ); //Bind to empty array at startup this.loadData = function (data) /
Knockout.js Performance Gotcha #1 - if/with bindings are not always cheap - Knock Me Out
update: Knockout 2.2 has addressed the first issue in this post. Now the if and ifnot binding will not re-render their contents unless the value changes between truthy and falsy. A recent StackOverflow question prompted me to start a series of short posts with some basic performance tips/gotchas for Knockout.js. In smaller applications, many of these items would go unnoticed, but as a project beco
Quick Tip: Telling Knockout to skip binding part of a page - Knock Me Out
Recently, I worked with several people on questions related to binding multiple view models in a single page. One common approach is to bind a view model to a particular root element using a call like ko.applyBindings(vm, containerNode);. However, a limitation with this approach is that when binding multiple view models, none of the container elements can overlap. This means that you could not bin
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stopBinding binding - JSFiddle - Code Playground
– Tech Pro Shopping