Knockout在運行時添加子對象

Question

我對knockoutjs很陌生，需要父視圖模型問題的一些幫助。

var DailyItems = function (data) { 
var p = this; 
this.Day = ko.observable(data.Day); 
this.Date = ko.observable(data.Date); 
this.Required = ko.observable(data.Required); 
this.RequiredActive = ko.observable(true); 
this.SetupTime = ko.observable(data.SetupTime); 
this.CloseTime = ko.observable(data.CloseTime); 
this.MinHrsPerDay = ko.observable(data.MinHrsPerDay); 
this.MaxHrsPerDay = ko.observable(data.MaxHrsPerDay); 
this.MinWorkShift = ko.observable(data.MinWorkShift); 
this.WorkSegments = ko.observableArray([]); 
var records = $.map(data.WorkSegments, function (x) { return new WorkShift(p, x) }); 
this.WorkSegments(records); 
this.EnableAdd = ko.observable(ko.toJS(this.WorkSegments).length < 8); 
this.Add = function() { 
    this.WorkSegments.push({ 
     Parent: p, 
     ID: "", 
     Day: data.Date, 
     Location: UNIT_ID, 
     Role: "", 
     EmployeeRoles2: "[]", 
     ShiftStart: "", 
     ShiftEnd: "", 
     LocationActive: true, 
     RoleActive: true 
    }); 
    this.EnableAdd(ko.toJS(this.WorkSegments).length < 8); 
} 
this.Delete = function (item) { 
    this.WorkSegments.remove(item); 
    this.EnableAdd(ko.toJS(this.WorkSegments).length < 8); 
} 

};

子模型就像如下：

var WorkShift = function (parent, data) { 
var self = this; 
this.Parent = ko.observable(parent); 
this.ID = ko.observable(data.ID); 
this.Day = ko.observable(data.Day); 
this.Location = ko.observable(data.Location); 
this.Parent = ko.observable(0); 
this.LocationActive = ko.observable(true); 
this.RoleActive = ko.observable(true); 
this.ShiftStart = ko.observable(data.ShiftStart); 
this.ShiftEnd = ko.observable(data.ShiftEnd); 
this.EmployeeRoles2 = ko.observableArray([{ "ID": 0, "Name": "Volume"}]); 
this.Location.subscribe(function (branchId) { 
    $.ajax({ 
     type: "POST", 
     url: SERVER_PATH + '/WebServices/AttributeService.asmx/GetDataOnLocationChange', 
     data: "{" + "clientId: '" + CLIENT_ID 
        + "', unitId: '" + branchId 
        + "', effectiveDate:'" + EFFECTIVE_DATE 
        + "'}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (res) { 
      var d = JSON.parse(res.d); 
      self.EmployeeRoles2(d.Roles); 
      if (d.IsSection == true) { 
       self.RoleActive(false); 
       self.Parent(d.Parent); 
      } 
      else if (d.IsRegularBranch == false) { 
       self.RoleActive(false); 
       self.LocationActive(false); 
      } 
      else { 
       self.RoleActive(true); 
       self.LocationActive(true); 
      } 
      var tasks = self.Parent().WorkSegments(); 
      //Requirement: for any day of the week, if there is more than one work segment 
      //at different branches the required type should be set to 'On' and made disable 
      if (tasks.length > 1) { 
       ko.utils.arrayForEach(tasks, function (i) { 
        if ((d.isSection == false && i.Location() != self.Location()) || (d.isSection == true && self.Parent() != i.Parent())) { 
         self.Parent().Required('O'); 
         self.Parent().RequiredActive(false); 
         return; 
        } 
        else { 
         self.Parent().Required('E'); 
         self.Parent().RequiredActive(true); 
        } 
       }); 
      } 
     }, 
     error: HandleLocationChangeError 
    }); 
} .bind(this)); 
this.Role = ko.observable(data.Role); 
this.TimeRangeTotal = ko.dependentObservable(function() { 
    var timeRangetotal = 'T: 0'; 
    var startTime = parseInt(ko.toJS(this.ShiftStart)); 
    var endTime = parseInt(ko.toJS(this.ShiftEnd)); 
    if (!isNaN(startTime)) { 
     var duration = endTime - startTime; 
     var hrs = parseInt(duration/100); 
     var mins = duration % 100; 
     if (mins == 55 || mins == 70 || mins == 85) 
      mins = mins - 40; //addresses deducting from a total hour (e.g. 1400 - 845) 
     timeRangetotal = "T: " + hrs + ":" + mins; 
    } 
    return timeRangetotal; 
}, this); 

}

注意兒童對象作爲從屬觀察到的和訂閱方法。我想在運行時添加一個子對象，因此在DailyItems模型中添加了Add（）函數。我的問題是如何迎合Add（）方法中的訂閱方法和可靠的可觀察性？

感謝有人能幫忙。

問候， Chathu

Answer 1

道歉，我沒有時間爲一個完整的答案，但你應該看看mapping plugin把你的JS數據到視圖模型。

在你的add方法，你需要創建一個子視圖模型，而不僅僅是增加一個普通JS對象到WorkSegments陣列：

this.Add =函數（）{VAR 數據= { 家長： p， ID： 「」， 日：data.Date， 位置：UNIT_ID， 作用： 「」， EmployeeRoles2： 「[]」， ShiftStart： 「」， ShiftEnd： 「」， LocationActive：真， RoleActive：true }; var child = new WorkShift（p，data）; this.WorkSegments（）。push（child）;

順便說一句，你可以更改此代碼：

this.EnableAdd = ko.observable(ko.toJS(this.WorkSegments).length < 8); 

到：

this.EnableAdd = ko.computed(function() { this.WorkSegments().length < 8; }); 

Answer 2

以下是工作代碼版本。它現在像一個美麗:)

this.Add = function() { 
    var data = { 
     Parent: p, 
     ID: "", 
     Day: this.Date, 
     Location: UNIT_ID, 
     ParentBranch:0, 
     Role: "", 
     EmployeeRoles2: "[]", 
     ShiftStart: "", 
     ShiftEnd: "", 
     LocationActive: true, 
     RoleActive: true 
    }; 
    var child = new WorkShift(p, data); 
    this.WorkSegments.push(child);