如何捆绑一个ko.嵌套在对象中的obersavableArray

How to bind a ko.obersavableArray that is nested in an object

本文关键字：嵌套 对象 obersavableArray ko 一个 何捆绑      更新时间：2023-09-26

我有我的knockout页面中心，我需要一个嵌套在ko.observable对象中的ko.obeservableArray，这就是我定义它们的地方:

 function IncomeDeclarationHub() {
    //data comes from a ajax call. 
    self.myIncomeDeclarationViewModel = ko.observable(new IncomeDeclarationViewModel(data));
 }
 function IncomeDeclarationViewModel(data) {
    var self = this;
    self.retentionAmount = ko.observable();
    self.taxableMonth = ko.observable();
    self.incDecDetGroViewModels = ko.observableArray();
    if (data != null) {
        var arrayLenght = data.IncDecDetGroViewModels.length;
        for (var i = 0; i < arrayLenght; i++) {
            var myObject = new IncomeDecDetGroViewModel(data.IncDecDetGroViewModels[i]);
            self.incDecDetGroViewModels.push(myObject);
        }
    }
 }
这是我的HTML代码: 
  <span class="label">
       Retention Amount
  </span>
  <input data-bind="value: myIncomeDeclarationViewModel.retentionAmount" />
  <table>
      <tbody data-bind="foreach: myIncomeDeclarationViewModel.incDecDetGroViewModels">
          ...
      </tbody>
   </table>

好的，所以事情是incDecDetGroViewModels从未被填充，我曾经有ko.obersableArray外的对象，它工作得很好，现在我把它插入到我的对象myIncomeDeclarationViewModel没有填充html表。我需要在data-bind

中以不同的方式调用它吗?

myIncomeDeclarationViewModel是一个可观察对象，所以你必须打开它来访问它的属性。添加括号来展开它(访问可观察对象的底层值)，如下所示:

<span class="label">
   Retention Amount
</span>
<input data-bind="value: myIncomeDeclarationViewModel().retentionAmount" />
<table>
  <tbody data-bind="foreach: myIncomeDeclarationViewModel().incDecDetGroViewModels">
      ...
  </tbody>
 </table>

这是一个基于你的例子的工作jsFiddle

JsFiddle

之前你可以访问它只是因为它在作用域中但现在你做了一些嵌套所以你只需要在视图部分进行一些循环来获取它

如 
<table data-bind="foreach:myIncomeDeclarationViewModel">
      <tbody data-bind="foreach:$data.incDecDetGroViewModels">
          ...
      </tbody>
   </table>

您也可以ContainerLess foreach，如果您寻找不同的东西，如:

<!-- ko foreach:myIncomeDeclarationViewModel -->
//your table code
<!--/ko-->

我希望这能解开这个谜。

相关文章：