3

したがって、コンポーネントとカスタム要素の導入により、ロジックとマークアップをカプセル化する方がはるかに簡単に思えますが、viewmodel を渡す必要がある場合に foreach セクション内でコンポーネントを使用する方法が少しわかりません。

したがって、私の現在のシナリオは、次のようなビューモデルがあることです。

function SomePartialViewModel()
{
    this.Name = ko.observable();
    this.Score = ko.observable();
    this.SomeDate = ko.observable();
}

function SomeViewModel()
{
    this.DataFromWebServiceCall = ko.observableArray();

    this.GetDataFromServer = function(){
        // get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel
    }
}

上記では、部分データを含む POJO があり、Web サービスなどに接続し、その配列に部分データのインスタンスを入力するビューのメイン ビュー モデルがあります。次に、これは現在次のように使用されます。

<div id="partial-data" data-bind="template: { name: 'partial-view', foreach: DataFromWebServiceCall }"></div>

<div class="partial-view">
    <label data-bind="text: Name"></label>
    <label data-bind="text: Score"></label>
    <label data-bind="text: SomeDate"></label>
</div>

.partial-viewが正しいテンプレート名などのスクリプト タグにあり、正しいテンプレートであると仮定すると、#partial-dataはメイン ビューにあり、ページにすべてのインスタンスを表示する必要があります。現在はすべて機能していますが、よりコンポーネントベースのモデルに移行したいと考えています。現在、テンプレートは SomePartialViewModel データに依存していることがわかります。そのため、そのコンポーネントのテンプレートとビューモデルがありますが、問題は周りにあります現在、セットアップ時にコンポーネントを登録しているため、ビューモデルをコンポーネントに取得し、params を使用してそのチャンクを設定します。ただし、この場合、バインド時にビューモデルをコンポーネントに渡したい...

コンポーネントをテンプレートに登録することはできますが、ビューモデルは登録できないと思いますが、プロパティを設定してテンプレートから foreach に移動dataできるスタイルバインディングの概念はありますか?$dataビューにバインドしますか？

うまくいけば、私が解決しようとしている問題が見られ、どんな情報でも素晴らしいでしょう.

4

2 に答える 2

1

を使用して値やビューモデルをコンポーネントに渡す方法はたくさんありますparams。

メソッドを使用する場合はcreateViewModel、params を介してビューモデルを渡すだけで、部分ビューモデルをコンポーネント ビューモデルとして使用できます。

ko.components.register("partial-view", {
    viewModel: {
        createViewModel: function (params) {
            return params.value;
        }
    },
    template: "<div>Partial View for <b data-bind='text: Name'></b></div>"
});

このフィドルで実際の例を見ることができます: http://jsfiddle.net/Quango/fn1ymf9w/

于 2014-11-14T14:30:23.270 に答える
0

viewModels の下に viewModels を定義できます:)

オブザーバブルを定義するのと同じように、別のビューモデルを定義でき、「with」バインディングを使用して、必要なコンポーネント ベースのモデルを作成できます。

最初に、コンポーネントとサブコンポーネント、サブサブサブコンポーネントなどのビューモデルを個別に作成します。

var SomePartialViewModel = function()
{
    this.Name = ko.observable();
    this.Score = ko.observable();
    this.SomeDate = ko.observable();
}

var SomeViewModel = function()
{
    this.DataFromWebServiceCall = ko.observableArray();

    this.GetDataFromServer = function(){
        // get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel
    }

    this.SPM = new SomePartialViewModel(); // partial-1
}

次に、MainViewModel を作成し、すべての主要な要素をここにバインドします。

var MainViewModel =  function() {

    var self = this;

    self.SVM = new SomeViewModel();

    self.SPM = new SomePartialViewModel(); // partial-2
}
ko.applyBindings(new MainViewModel());

次に、htmlで、ノックアウトエンティティで作成したコンテキストに従ってコンポーネントを作成できます

    ...

    <body>
    <div data-bind="with: SVM">
        ....
        <div data-bind="with: SPM">
            <!-- partial-1 data -->
        </div>
        ...
    </div>


    <div data-bind="with: SPM">
        <!-- partial-2 data -->
    </div>
    </body>
...

コンポーネント モデル用に個別のファイルを作成し、Require js のようなモジュラー スクリプト ローダーを使用して、完全なコンポーネント ベースのノックアウト Web アプリケーションにまとめてバインドすることができます。

于 2014-09-15T08:03:17.770 に答える