0

その中にウィジェットの動的セット（実際のデュランダルウィジェットではない）を含むビューを作成しようとしています。各ウィジェットは、独自の動作とレンダリングを持つ単なる標準モジュールであり、ユーザーはそれらをドラッグして再編成したり、追加したり削除したりできる必要があります。

現在のファイル構造は次のとおりです。

  • ビューモデル
    • home.js
    • widgetA.js
    • ウィジェットB.js
  • ビュー
    • home.html
    • widgetA.html
    • widgetB.html

ホーム viewModel にはobservableArray、widgets と呼ばれる が含まれています。これには、ウィジェットのビューモデルの名前が文字列として含まれています。

   var vm = {
        activate: activate,
        someContext: ko.observable()
        widgets: ko.observableArray()
    };

問題＃1：

foreach 内で構成バインディングを使用すると、すべてが期待どおりに機能します。次に例を示します。

<div data-bind="foreach: widgets">
    <div data-bind="compose: $data"></div>
</div>

ただし、からに変更するforeachとsortable、$data がウィジェットを参照しなくなり、現在のホーム コンテナー ビューが無限にレンダリングされるようになります。

更新: $data が実際に変更されているかどうかを確認するために、次のことを行いました。

<div data-bind="foreach: widgets">
    <div data-bind="text: JSON.stringify($data)"></div>
</div>

実際、foreach を使用すると結果はウィジェットの viewModel 名になりましたが、sortable を使用すると、ホームの実際の viewModel が含まれていました。

問題＃2：

初期化のためにその情報が必要なため、someContext viewModel プロパティをウィジェットに送信する必要があります。activationData を使用してみましたが、オブジェクトが未定義であるというエラー メッセージが表示されました。

<div data-bind="foreach: widgets">
    <div data-bind="compose: { model: $data, activationData: someContext }"></div>
</div>

このように構成を利用することで、すべてのウィジェット タイプへの依存関係を明確に宣言し、ホーム ビューモデルでそれらをインスタンス化する必要を回避したいと考えていましたが、このルートを試すのは間違っている可能性があります。

このスレッドで見つかったコメントに基づいてアプローチしました: https://groups.google.com/forum/#!topic/durandaljs/it3q3QePI2M

私はノックアウト + デュランダルにかなり慣れていないので、すべての意見を歓迎します。

4

1 に答える 1

1

実は、これは私の恥ずかしい間違いだったことがわかりました。jqueryUIとknockout- sortable をjs バンドルに含めるのを忘れていました。これらのコンポーネントが欠落している場合、その奇妙な動作が発生します。

他の誰かに役立つ場合に備えて、ここに答えを残します。

于 2013-10-23T18:11:21.333 に答える