淘汰赛结合继承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) 
} 

，并试图结合不同类型的活动，一些像这样的容器：

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>

Answer 2

您提供的小提琴的错误来自方法ActivityTypeId。请记住，在创建function时，this会被功能的当前范围覆盖，因此Activity现在在您当前的this中丢失。

function ViewModel() { 
    this.ActivityTypeId = ko.observable(1500); 
    this.Activity = ko.observable(new MeetingActivity('meeting 1', 'g12', 155)) 

    this.ActivityTypeId.subscribe(function(typeId) { 
    if (typeId == 1500) this.Activity(new MeetingActivity('meeting 1', 'g12')) 
    else if (typeId == 1600) this.Activity(new TeachingActivity('meeting 2', 'g13', 155)) 
    }) 
} 

要修复它，您可以将其分配给其他变量并通过它访问该活动。像：

function ViewModel() { 
    var self = this; //this is what i meant in assigning in another variable 
    this.ActivityTypeId = ko.observable(1500); 
    this.Activity = ko.observable(new MeetingActivity('meeting 1', 'g12', 155)) 

    this.ActivityTypeId.subscribe(function(typeId) { 
    if (typeId == 1500) self.Activity(new MeetingActivity('meeting 1', 'g12')) //use self on accessing Activity 
    else if (typeId == 1600) self.Activity(new TeachingActivity('meeting 2', 'g13', 155)) //use self on accessing Activity 
    }) 
}