淘汰賽結合繼承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 
    }) 
}