Javascript 在KnockoutJS中，绑定正在清除我的DOM

我有一个相当复杂的ViewModel，其中包含以下子ViewModels：

define('budgetCalculatorViewModel',
  ['knockout', 'jquery', 'dependantsBankResidenceViewModel', 'employmentViewModel', 'incomeViewModel', 'expenditureViewModel', 'priorityDebtViewModel', 'courtOrderCreditDebtContainerViewModel', 'frequencyValues'],
  function (ko, $, dependantsBankResidenceViewModel, employmentViewModel, incomeViewModel, expenditureViewModel, priorityDebtViewModel, courtOrderCreditDebtContainerViewModel, frequencyValues) {
    function budgetCalculatorViewModel() {
      var self = this;

      self.employment = new employmentViewModel();
      self.dependants = new dependantsBankResidenceViewModel();
      self.income = new incomeViewModel();
      self.expenditure = new expenditureViewModel();
      self.priorityDebts = new priorityDebtViewModel();
      self.courtOrders = new courtOrderCreditDebtContainerViewModel();
      self.frequencyValues = ko.observableArray(frequencyValues);
      self.index = ko.observable(0);
    }

    return budgetCalculatorViewModel;
  });

将绑定到所有这些视图模型的HTML位于一个视图文件中（

.cshtml

，因为我在ASP.NETMVC中工作）

在我看来，我正在这样做：

<div class="tab-content transparent">
  <div class="tab-pane active" id="tab1">
    <div class="row">
      <div class="col-md-12 block employment" data-bind="with: self.employment">
        <div class="block-title">
          <h3>Your <strong>Employment</strong></h3>
          <hr />
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" data-bind="checked: self.isEmployed" /> Are you employed?
          </label>
        </div>

        <!-- other markup taken off -->

      </div><!-- .col-md-12 .block .employment -->
    </div><!-- .row -->
  </div><!-- .tab-pane -->
</div><!-- .tab-content -->

你的工作

你有工作吗？

但这不管用！当页面加载到Chrome中时，绑定后的所有内容都会从DOM中丢失！这是一张截图

---

我遗漏了什么？

假设您最终绑定到

budgetCalculatorViewModel

的一个实例，您不应该将

与：self.employment一起使用，而应该是
与：employment一起使用
：

<div class="col-md-12 block employment" data-bind="with: employment">



在您的模型中，
self
指的是
budgetCalculatorViewModel
实例，而在绑定敲除中，将在实例中查找名为
self
的属性，该属性不存在。注意到：

带有
绑定的
将根据关联值是否为
null
/
未定义
动态添加或删除子元素

由于
自雇
不存在，它会删除所有内部元素。
假设您最终绑定到
预算计算器视图模型的实例
，您不应该将
与：自雇
一起使用，而应该是
与：就业
：

<div class="col-md-12 block employment" data-bind="with: employment">



在您的模型中，
self
指的是
budgetCalculatorViewModel
实例，而在绑定敲除中，将在实例中查找名为
self
的属性，该属性不存在。注意到：

带有
绑定的
将根据关联值是否为
null
/
未定义
动态添加或删除子元素

既然自雇自雇不存在，它就消除了所有的内在因素。
我本以为自雇自雇和自雇自雇的意思是一样的，但我想我错了：）谢谢，你是对的！我会在5分钟内记下答案。我本以为
自我雇佣
和
雇佣
的意思是一样的，但我想我错了：）谢谢，你是对的！我会在5分钟内记下答案