web-dev-qa-db-ja.com

knockout.jsを使用して単一ページのアプリを構築する方法は？

モーダルウィンドウのようなものや、プロファイルのような動的なページをどのように整理するのか、ほとんど疑問に思っています。 viewModelには1つの縦断ビューのみが含まれるべきですか、それとも読み込まれたすべてのプロファイルが含まれるべきですか？これは非常に「きれい」に見えません。

viewModel = {
  profile: ko.observableArray([
    new ProfileViewModel()
    //... any others loaded
  ])
, createPostModal: {
    input: ko.observable()
  , submit: //do something to submit...
  }
}

<div data-bind="foreach: profile"><!-- profile html --></div>
<div data-bind="with: createPostModal"></div>

この方法はあまり一貫性がないようです。いくつかのアドバイスを提供できるノックアウト付きのシングルページアプリを構築した人はいますか？コードサンプルをいただければ幸いです。

javascriptknockout.js
35
sdfadfaasd

私たちはこの道を仕事で始めたばかりなので、私たちが何をしているのかよくわかりません。しかし、ここに私たちの考えがあります。

ページは、任意の数の「コンポーネント」で構成する必要があります。各コンポーネントには、ビューモデルと1つのパブリックメソッドrenderTo(el)があります。

ko.applyBindings(viewModelForThisComponent, el)

また、サブコンポーネントをレンダリングする機能を持つこともできます。

コンポーネントの構築または更新は、適切なビューモデルを導出するモデル（サーバーからのJSONデータなど）をコンポーネントに与えることで構成されます。

次に、最上位のアプリケーションコンポーネントから始めて、一連のコンポーネントをネストしてアプリを作成します。

"hypothetical" ブック管理アプリケーションの例を次に示します。コンポーネントはLibraryUI（すべての本のタイトルのリストを表示）とDetailsUI（本の詳細を表示するアプリのセクション）です。

function libraryBookViewModel(book) {
  return {
    title: ko.observable(book.title),
    showDetails: function () {
      var detailsUI = new BookDetailsUI(book);
      detailsUI.renderTo(document.getElementById("book-details"));
    }
  };
}

function detailsBookViewModel(book) {
  return {
    title: ko.observable(book.title),
    author: ko.observable(book.author),
    publisher: ko.observable(book.publisher)
  };
}

function LibraryUI(books) {
  var bookViewModels = books.map(libraryBookViewModel);
  var viewModel = {
    books: ko.observableArray(bookViewModels);
  };

  this.renderTo = function (el) {
    ko.applyBindings(viewModel, el);
  };
}

function BookDetailsUI(book) {
  var viewModel = detailsBookViewModel(book);

  this.renderTo = function (el) {
    ko.applyBindings(viewModel, el);
  };
}

書籍の詳細をシングルトンではなくjQuery UIダイアログに表示する方法に注意してください#book-details要素、showDetails関数を変更して

var dialogEl = document.createElement("div");
detailsUI.renderTo(dialogEl);
$(dialogEl).dialog();
15
Domenic

Knockoutjsを使用してSPAを作成するのに役立つフレームワークが3つあります。

私はDurandalを使用しており、本当に気に入っています。使いやすく、多くのニース構成があるため、独自の実装をプラグインできます。また、Durandalは、Silverlight/WPFアプリケーションを構築するための非常に人気のあるフレームワークである Caliburn の同じ作成者によって作成されます。

12
Evan Larsen

現在2014年には、Knockoutのコンポーネント機能とYeomanを使用して、最初のkoプロジェクトを足場したいと思うでしょう。このビデオを参照してください： Steve Sanderson-Architecting large Single Page Applications with Knockout.js

6
programmer

[2013年4月5日更新]この回答の執筆時点では有効でした。現在、私は Durandal JS アプローチを提案しています。または、ASP.NET MVCを使用している場合は John PapaのHot TowelまたはHot Towelette SPAテンプレート を確認します。これもデュランダルを使用しています。

以下の元の答え：

Knockout.jsに関するPhillipe Monnets 4パートシリーズを紹介します。彼は、サンプルプロジェクトを複数のファイルに分割した、私が最初に出会ったBloggerです。私は彼のアイデアのほとんどが本当に好きです。私が見逃した唯一のことは、ある種のリポジトリ/ゲートウェイパターンを使用してajax /残りのコレクションを処理する方法でした。それは良い読み物です。

パート1へのリンク http://blog.monnet-usa.com/?p=354

幸運を！

3
Maarten Docter

私は、Knockoutを主要コンポーネントとしてまとめたミニSPAフレームワークをオープンソース化しました。

knockout-spaKnockout、Require、Director、Sugarの上に構築されたミニ（しかし本格的な）SPAフレームワーク。 https://github.com/onlyurei/knockout-spa

ライブデモ：http://knockout-spa.mybluemix.net

特徴

  • ルーティング（FlatironのDirectorに基づく）：HTML5履歴（pushState）またはハッシュ。
  • 高度に構成可能で再利用可能：ページ固有のJSでページのモジュール/コンポーネントを選択すると、それらはページのHTMLテンプレートに自動接続されます
  • SEO対応（prerender.io）
  • 高速かつ軽量（85 KBのJSを縮小してギプス処理）
  • プロダクション用のJS用の2層バンドルビルド：ほとんどのページで使用される共通モジュール、および遅延ロードされるページ固有のモジュール
  • JS、CSS、HTMLを整理して再利用するために正常な状態を保つのに役立つ整理されたフォルダー構造
  • Knockout 3.3.0以降を使用して、KnockoutのWebコンポーネントのフレーバーとカスタムタグに対応（ http://knockoutjs.com/documentation/component-overview.html ）
  • すべてのドキュメントは主要な依存関係の独自のホームページにあるので、新しいフレームワークを完全に学ぶ必要はありません
1
onlyurei