0

動的に追加されたネストされたオブジェクトに対してノックアウトバインディングを機能させるにはどうすればよいでしょうか。次のサンプルは、「Init inner」ボタンをクリックしても「内部値」が表示されないことを示しています。

<div data-bind="with: InnerObj">
    <div data-bind="text: Pr"></div>
</div>

<button data-bind="click: initInner">Init inner</button>

<script type="text/javascript" language="javascript">
var obj = { 
   InnerObj: null,
   initInner: function () { 
         this.InnerObj = { Pr: "inner value" };
   }
 }

$(function () {        
    ko.applyBindings(ko.mapping.fromJS(obj));
});    

</script>
4

2 に答える 2

1

このオブジェクトをオブザーバブルとして宣言し、関数としてアクセスする値を設定する必要があります

<button data-bind="click: initInner">Init inner</button>
<div data-bind="with: InnerObj">
   <span data-bind="text: Pr"/>
</div>

<script type="text/javascript" language="javascript">
var obj = { 
   InnerObj:  ko.observable(),
   initInner: function () {   
      this.InnerObj({'Pr':ko.observable('Inner value')});
   }
}


$(function () {        
    ko.applyBindings(obj);
});    

</script>

キーポイント：1-InnerObj：ko.observable（）2-this.InnerObj（{'Pr'：ko.observable（'Inner value'）}）;

参照：http： //knockoutjs.com/documentation/observables.html-オブジェクトからのビューモデルの更新が機能しない

于 2012-07-20T20:31:58.910 に答える
0

これは、@Victor Eloy が提案したものを少し変更した例です。この場合obj は、サーバーから取得した純粋なモデルであり、観測可能なものはありません。トリックは ko.observable(null) にマッピングすることです.KOマッピングは残念ながらデフォルトでは行いません.

<button data-bind="click: initInner">Init inner</button>

<div data-bind="with: InnerObj"> 
    <div data-bind="text: Pr"></div>
</div>

<script type="text/javascript" language="javascript">

var obj = {
    // This case works too: InnerObj: { Pr: "init value"},
    InnerObj: null,

    initInner: function () {
        this.InnerObj({ Pr: ko.observable("new value") });
    }
};

var mapping = {
    'InnerObj': {
        update: function (options) {
            return (options.data == null) ? null : ko.observable(options.data);
        }
    }
};

$(function () {
    var viewModel = ko.mapping.fromJS(obj, mapping);
    ko.applyBindings(viewModel);
});

于 2012-07-21T01:49:21.080 に答える