デュランダル：ViewModel 間でデータを受け渡す最良の方法

Question

デュランダル：可能であれば（バックエンドを処理せずに）ビューモデル間でデータ（パラメータ）を渡す正しい方法は何ですか。

2 つのビューがあるとしましょう 概要 そして 詳細 ユーザーがリスト要素をクリックするようにしたい 概要 その要素の ID を取得して、それを渡します 詳細 Viewmodel を使用して、その ID で作業を開始できるようにします。

お手伝いありがとう

Answer 1

ヒント：おそらく、ルート駆動型のアプローチが必要になるでしょう。もう 1 つは完全を期すためのものです。

ビューモデル駆動のアプローチ一般的に私はこう言います：モジュールを作成し、それをデータと呼びます。そして、そのデータ モジュールを両方のビューモデルに挿入します。その後、概要はデータ モジュールの clickedElementId 属性を設定し、詳細は属性の値を読み取って使用できます (属性を監視可能にして、概要によって属性が変更されたときに詳細が通知されるようにすることもできます)。このアプローチは、両方のビューモデルが同時にアクティブにできる場合に機能しますが、私の次の（推奨）ソリューションは、一方のビューからもう一方のビューにルーティングする場合にのみ機能するため、同時にアクティブになることはありません。この「ビューモデル駆動型」アプローチは、私が個人的にアプリケーション内の共通データに使用しているものです (これらの種類の属性にはアプリケーション シェルのビューモデルを使用することもできます)。

ルート主導のアプローチ状況の説明を考えると、あなたがやりたいことのようです。定義されたルートは (オプションの) パラメータを取ることができます。ルート「details」があるとします。これを「details/:id」(ID パラメーターを受け入れる、オプションではない) または「details(/:id)」(ID パラメーターを受け入れる、オプション) に変更できます。

リスト要素をクリックするには、次のようなイベント ハンドラーが必要です。

overview.onElementClick = function (e) {
    var element = this, // The idea is that you need the clicked element for the next line of code
        koDataForElement = ko.dataFor(element);

    router.navigate('details/' + koDataForElement.id);
}

ko.dataFor は、渡した要素 (この場合はリスト要素) にバインドされているビューモデル データを取得する優れたノックアウト ヘルパーです。クリックすると詳細に移動し、クリックされた要素の ID を詳細に渡します。上記のコードはすべてを行います。

これで、詳細ビューモデルの activate 関数は次のようになります。

details.activate = function (id) {
    // id is the parameter we defined for the route. Now you are free to leverage it inside your second view!
};

編集：追加のヒント:リンクから直接 ID を使用してルートをトリガーすることもできます。リスト要素全体がアンカー タグで囲まれていると仮定すると、次のようなことができます。

<div data-bind="foreach: myListOfElements">
    <a href="#" data-bind="attr: { href: '#details/' + id }">listElementGoesHere</a>
</div>

幸運を！それでも不明な場合はお知らせください。