9

ビューを管理し、単一のページ内で構成できるようにすることを期待して、(数時間前の時点で) Durandalを使い始めました。Knockout を使用する以前のアプローチは、太い HTML ファイルで維持するには扱いにくくなりすぎていました。

Durandal をインストール/セットアップし、ビューとビューモデルを作成できますが、ビューモデルにデータを取得して新しいビューモデルの基礎として使用する方法がわかりません。

たとえば、項目を選択するための「左側のナビゲーション バー」があります。項目が選択されると、現在のモデルで観察可能な「選択された項目」が更新されますが、右側に正しい「詳細ビュー」も読み込まれる必要があります。コンポーネント/ビューを分離するためにDurandalを試す理由については、これは別のビュー/ビューモデルから来る必要があります.

CompositionおよびUsing Compositionを含むドキュメントを読みましたが、ビューモデルにデータを渡す方法が明確ではありません。(現在のビュー/スコープ内の) 既存のモデルでビューを使用できるように思えますが、現在のモデル データ (つまり ID) の一部を使用して、「実際の」モデル データを取得したいだけです。景色。

したがって、私の質問です。

  • 「選択した項目」などの初期データをビューモデルに渡す方法は? 私は宣言的な "compose:" バインディングを使用したいと思います。

  • ここで初期データを持っている/渡すというこの概念は正しい方法ですか、それともより良い代替手段がありますか? 「activeItem」が漠然と言及されているのを見たことがありますが、詳細/使用法は私をほのめかしています。

更新 1: How do we share the data between views/Pass the data view to view を見つけましたが、実際の実装では応答が不足しています。親子間でビューモデルを共有したくない (個別のビュー/ビューモデルのペア) と、宣言型アプローチ (イベントなし) を使用したい。親は子について知る必要はありませんが、子は親からデータを受け取る必要があります。

更新 2: 上記では「id」のみが必要であるとほのめかしましたが、ルーターが必ずしも適しているとは限らない、任意の基本オブジェクトで機能するアプローチが必要です。この場合、ディープ リンクは問題になりません。ただし、ルーターがこれにアプローチする方法であると思われる場合は、そのような（詳細を含む）引数を回答として投稿してください。少なくとも賛成票を投じます..

4

3 に答える 3

3

ブリーズのソース コードを見ると、マスター ディテール アプローチの例を見ることができます。

彼らは子ビューを構成するためにアクティベーターを使用しています。

https://github.com/IdeaBlade/Breeze/blob/master/Samples/TempHire/TempHire/App/viewmodels/resourcemgt.js

ブリーズを使用しているかどうかはわかりませんが、アプローチはデータの取得方法とは無関係です。

于 2013-03-11T11:19:58.320 に答える
3

Eric Panorel による Visual Studio 用の John Papa の SPA テンプレートを使用してこれを行う方法についてのすばらしい記事があります: http://ericpanorel.net/blog/hot-towel-spa-master-detail-scenario。

つまり、Durandal でルーティングを利用することができ、次のようになります。

master.jsアイテムのセットを公開します:

define(function() {
  var self = this;

  this.items = ko.observableArray([]);

  var activate = function() {
     // ... get your items
     self.items([ { id: 0, name: 'Item 1' }, { id: 1, name: 'Item 2' }]);
  }

  return {
    // some properties and ...
    activate: activate
  }
});

master.htmlそれらをバインドし、詳細ビューにリンクします。

<section data-bind="foreach: items">
   <a data-bind="text: name, attr: { href: '#/item/' + id() }"></a>
</section>

あとは、ルート データ パラメーターを使用して、詳細ビューモデルで ID を取得するだけdetail.jsです。

define(function() {
  var self = this;

  this.name = ko.observable();

  var activate = function(routeData) {
     var itemId = routeData.id;

     // ... get your item details
     // var details = ...

     self.name(details.name);
  }

  return {
    // some properties and ...
    activate: activate
  }
});

最後に、次のようにルートを指定する必要がありますmain.js。

define(['durandal/app', 'durandal/viewLocator', 'durandal/system', 'durandal/plugins/router'],
function(app, viewLocator, system, router) {

    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.title = 'Durandal app';
    app.start().then(function() {
        toastr.options.positionClass = 'toast-bottom-right';
        toastr.options.backgroundpositionClass = 'toast-bottom-right';

        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //configure routing
        router.useConvention();
        router.mapRoute('item/:id', 'viewmodels/item', 'Item', false);

        app.adaptToDevice();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

そして、そこに行きます！

于 2013-05-04T06:10:28.687 に答える
0

モーダル呼び出しと同じように、任意の基本オブジェクトを渡すことができると思います。ko.compose受動的です。durandal ルーターを使用すると、データを好きな場所に運ぶことができます。この回答で私の回避策を見て、実行するのを手伝ってください。

于 2013-05-10T00:02:59.800 に答える