1

コンテキスト
私は現在、KoGrid と組み合わせた KnockoutJS を調査しています。
複数のフィールド(フィールドにもバインドされている) を含むオブジェクトと、KoGrid に表示したい子オブジェクトのリストがあります。


私が抱えている問題を示す jsFiddle を用意しました:
http://jsfiddle.net/kPmAJ/4/

問題:
私のビューモデルには、親オブジェクトを含む監視可能な fooが含まれています。 この親オブジェクトには、オブジェクトを含むobservableArrayであるchildrenプロパティがあります。

KoGrid はバインドされています$root.foo().children

これは、バインディングを初期化する前に配列が満たされている場合に機能します。
ただし、オブジェクトは後で置き換えられ (データは AJAX を介してロードされ、再ロードできます)、明らかにKoGrid アイテムのバインドが失われます。

ビューモデルの foo オブジェクトは observable であるため、これにより、内部の配列を監視している KoGrid がトリガーされ、 foo が置き換えられた場合に更新されると考えていました。これは foreach バインディングで完全に機能します。

どうやらKoGridはトリガーしません。

--

ここで何か間違ったことをしていますか、それとも KoGrid で問題が発生していますか?

コード (参考用です。フィドラーを参照してください ;))

var SampleObject = function (data) {
    this.id = new ko.observable(data ? data.id : null);
    this.children = new ko.observableArray([]);

    if(data) {
        var childrenMapped = [];
        $(data.children).each(
            function()  {
                childrenMapped.push(new SampleChildObject(this));
            }
        );
        this.children(childrenMapped);
    }
}

var SampleChildObject = function (data) {
    this.name = new ko.observable(data ? data.name : null);
};


var vm = {
    foo: new ko.observable('John Doe'),
    bar: new ko.observable(
            new SampleObject(
            {
                id: 1234,
                children: []
            })
        )
};

ko.applyBindings(vm);

// Returns from an AJAX-call instead, so can't be before applyBindings
vm.bar(new SampleObject(
            {
                id: 1234,
                children: [
                    { name: 'test1' },
                    { name: 'test2' },
                    { name: 'test3' }]
            }));

-

<div style="height: 500px;"
data-bind="koGrid: { data: bar().children }"></div>

<ul data-bind="foreach: bar().children">
    <li data-bind="text: name"></li>
</ul>

ありがとう！

4

1 に答える 1

2

何が起こっているかというと、koGrid バインディングには更新ハンドラーがないため、bar の変更に応答していません。

koGrid は監視可能な配列の子を監視しますが、bar().children の値を Ajax 呼び出しから返された値に置き換えると、グリッドが更新されます。

このような：

function (data) {

    var childrenMapped = [];

    $(data.children).each(

        function()  {

            childrenMapped.push(new SampleChildObject(this));

});
    bar().children(childrenMapped);

    bar().id(data.id);

});

この問題を解決するはずのマッピング プラグインもチェックアウトする必要があります。 ko マッピング

于 2013-05-18T13:13:01.073 に答える