javascript - knockout 绑定(bind)继承的 javascript 对象

Question

我有两种类型的事件:

function Activity(type, name) {
  this.Type = type
  this.Name = ko.observable(name)
}

function MeetingActivity(name, place) {
  Activity.call(this, 1500, name)
  this.Place = ko.observable(place)
}

function TeachingActivity(name, place, teacherId) {
  Activity.call(this, 1600, name)
  this.Place = ko.observable(place)
  this.TeacherId = ko.observable(teacherId)
}

并尝试将不同类型的事件绑定(bind)到某个容器，如下所示:

Activity:
<select data-bind='value: ActivityTypeId'>
  <option value='1500'>Meeting</option>
  <option value='1600'>Teaching</option>
</select>
<div data-bind='if: ActivityTypeId()==1500'>
  <div data-bind='with: Activity'>
    <span data-bind='text:Name'></span>
    <span data-bind='text:Place'></span>
  </div>
</div>
<div data-bind='if: ActivityTypeId()==1600'>
  <div data-bind='with: Activity'>
    <span data-bind='text:Name'></span>
    <span data-bind='text:Place'></span>
    <span data-bind='text:TeacherId'></span>
  </div>
</div>

我写了this fiddle完成事情但运气不好，我做错了什么？

Answer 1

您的 original fiddle 的问题是您更新了 Activity 以包含新类型，并且显示更改为显示该类型，但有时包含的类型和预期显示的类型不相同。

为了确保不存在同步问题，您应该对 Activity.Type (它应该是一个可观察的)进行测试。另外，不要将 Activity 设为可观察对象并订阅以更改其值，只需将其设为计算对象即可。

function Activity(type, name) {
  this.Type = ko.observable(type)
  this.Name = ko.observable(name)
}

function MeetingActivity(name, place) {
  Activity.call(this, 1500, name)
  this.Place = ko.observable(place)
}

function TeachingActivity(name, place, teacherId) {
  Activity.call(this, 1600, name)
  this.Place = ko.observable(place)
  this.TeacherId = ko.observable(teacherId)
}

function ViewModel() {
  var self = this
  self.ActivityTypeId = ko.observable(1500);
  self.Activity = ko.computed(
    function() {
      var typeId = +self.ActivityTypeId();

      if (typeId == 1500) return new MeetingActivity('meeting 1', 'g12');
      else if (typeId == 1600) return new TeachingActivity('meeting 2', 'g13', 155);
      else console.warn('Type ID:', typeId);
    });
}
var VM = null
$(document).ready(function() {
  VM = new ViewModel()
  ko.applyBindings(VM)
  console.log(VM)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Activity:
<select data-bind='value: ActivityTypeId'>
  <option value='1500'>Meeting</option>
  <option value='1600'>Teaching</option>
</select>
<div data-bind="with: Activity">
  <div data-bind='if: Type()==1500'>
    <span data-bind='text:Name'></span>
    <span data-bind='text:Place'></span>
  </div>

  <div data-bind='if: Type()==1600'>
    <span data-bind='text:Name'></span>
    <span data-bind='text:Place'></span>
    <span data-bind='text:TeacherId'></span>
  </div>
</div>