2

KnockoutJS を使い始めたばかりで、PagerJS、SammyJS、BootStrap と組み合わせて単一ページ アプリを構築していますが、今は少し迷っています。

私を驚かせたのは、ビューモデルを整理し、ルーティングとページをシンプルかつ再利用可能な方法で組み合わせるにはどうすればよいかということです。今のところ、実際にはほとんど収まらない緩いビットの山のように感じます. SOでいくつかの回答を確認しましたが、アプリを整理する方法をまだ理解していません。

現時点では、概念実証としてページに 1 つのビューモデルがあり、ユーザーの個人情報と今後のイベントの表示を処理するだけです。ただし、今は他のタイプの情報を組み込む必要があり、ユーザーが自分のイベント、連絡先、タスクを管理し、他のユーザー、イベントをリストできることが期待されるため、1 つのビューモデルではなく複数のビューモデルを持つのは適切ではないようです。とりわけ、タスク。まだまだ続きます。

ユーザーが選択するほとんどすべてのオプションは、データベースで定義されています。たとえば、ユーザー タスクと、これらのタスクを解決するための対応するアクションは、データベースで事前定義されています。

ほとんどの例では、SammyJS ルーティングをビューモデルに配置する傾向がありますが、ページに複数のビューモデルがある場合、SammyJS を単一のビューモデルから移動して、単一の場所でルートを編集したいと考えています。

私の考えでは、PagerJS を使用して異なるビューを簡単に切り替えることができますが、SammyJS で設定されたパスと PagerJS で使用されるデータ バインド パスとの間の同期が必要です。たとえば、#!/user を選択すると、Sammy のルーティングがリクエストを処理し、表示するデータをフェッチし、PagerJS がユーザー ページを表示します。私には少しもろい気がしますが、おそらくそれが機能するはずです。

4

1 に答える 1

2

事前にいくつかの警告：

私はRequireJSを使用してアプリをモジュールに分割しています - これは必ずしも必要ではありません (しゃれは意図していません) - すべてを 1 つの Javascript ファイルにダンプして動作させることができます。この質問は、私のプロジェクトがどのようにレイアウトされているかを示しています。

また、ルーティングには SammyJS を使用していませんが、Crossroadsと Hasher を使用しています。ただし、概念は多少同じである必要があります。

以下の例は、おそらくあなたがやっていることと 100% 一致するわけではありませんが、私が使用しているアプローチのアイデアが得られることを願っています.

Mymain.jsにはすべてのルーティング情報が含まれており、各ルート ハンドラー内ではrequire()、RequireJS を使用して、そのルートに使用しているモジュールを取り込みます。各モジュールには、Knockout ViewModel と、ViewModel のデータのロード、特定のコンテキストでのバインドなどを行うためのいくつかのメソッドが含まれています。

main.jsルートを表示するためにルートを処理する方法は次の#/person/idとおりです。

crossroads.addRoute("person/{id}", function(id){
    require(["person"], function(person) {
        var model = person.load(id);
        person.view($('#content'), model);
    });
});

の重要な部分person.js:

define(['jquery', 'knockout', ...], function($, ko, ...) {
    var person = {};
    person.Model = function Model(id) {
        this.id = ko.observable(id);
        this.name = ko.observable();
        // more properties and methods removed...
    };

    person.load = function(id) {
        var model = new person.Model(id);
        var request = $.ajax({
            // ajax config properties removed...
            'success' : function(resp) {
                model.name (resp.name);
                // more property setting removed...
            }
        });
        return model;
    };

    person.view = function(element, model) {
        // Using require text plugin to load templates...
        require(['text!templates/person/view.tmpl.html'], function(ViewTemplate) {
            element.empty();
            element.html(ViewTemplate).ready(function() {
                ko.applyBindings(model, element.get(0));
                // any further setup needed below...
            });
        });
    };
    return person;
});
于 2013-02-22T14:11:28.707 に答える