vòng lặp vô hạn khi chuyển đổi đối tượng loại trực tiếp đến đối tượng JavaScript đơn giản

Question

hướng dẫn Folliwing đưa ra trong documentation, tôi có mô hình quan điểm sau đây:

var newContactViewModel = function() { 
    var self = this; 

    self.Name = ko.observable(); 
    self.Address = ko.observable(); 
    self.City = ko.observable(); 
    self.State = ko.observable(); 
    self.PostalCode = ko.observable(); 

    self.Save = function() { 
     $.ajax({ 
      type: "POST", 
      url: "/contact", 
      data: ko.toJS(self), //infinite loop here 
      success: state.OnSaved 
     }); 
    }; 
}; 

Khi phương pháp self.Save được gọi, một vòng lặp vô hạn xảy ra. Chrome thực sự báo cáo các lỗi như:

Uncaught RangeError: Maximum call stack size exceeded

Nếu tôi sử dụng ko.mapping.toJS(self) thay vì ko.toJS(self), sau đó tôi nhận được một lỗi hơi hở hang hơn, nhưng không có lỗi thật "message":

Nếu tôi hoán đổi ko.toJS(self) với một cái gì đó như { Name: self.Name(), Address: self.Address() /* etc */ }, sau đó mọi thứ hoạt động tốt. Có vẻ như nó đang cố gắng chuyển đổi phương thức Save và gọi lại phương thức đó.

Có lỗi trong KnockoutJS hoặc có sự cố khi tôi sử dụng nó. Tôi thích cái sau. Suy nghĩ?

Answer 1

Tôi đã tìm ra sự cố với mã. ko.toJS duy trì các chức năng trong đối tượng để có thể ánh xạ nó tốt. Tuy nhiên, jquery sẽ gọi tất cả các hàm trên đối tượng dữ liệu để cố gắng lấy một giá trị. Điều này lần lượt gây ra vòng lặp vô hạn.

Bạn cần gắn cờ chức năng Save để không được ánh xạ. Rất tiếc, chức năng toJS không xuất hiện để có thể thực hiện điều đó. Nó sẽ giữ tất cả các thành viên của đối tượng. Plugin bản đồ may mắn cho phép bạn làm điều đó.

Để loại trừ thành viên, hãy đặt tùy chọn ignore thành một mảng có chứa 'Save' và nó sẽ bỏ qua thành viên Save khi được ánh xạ.

var data = ko.mapping.toJS(self, { 
    ignore: ['Save'] 
}); 

Nếu bạn không sử dụng plugin ánh xạ, bạn luôn có tùy chọn xóa hàm Save khỏi đối tượng JS.

self.Save = function() { 
    $.ajax({ 
     type: "POST", 
     url: "/contact", 
     data: self.ToData(), 
     success: state.OnSaved 
    }); 
}; 
self.ToData = function() { 
    var data = ko.toJS(self); 
    delete data.Save; // remove functions 
    delete data.ToData; 
    return data; 
}; 

Mặt khác, tôi sẽ đề nghị không cố gắng sử dụng các ví dụ xem mô hình như các dữ liệu cho các cuộc gọi của bạn. Thay vào đó, tôi sẽ tạo đối tượng dữ liệu một cách rõ ràng. Chắc chắn nó có tiềm năng rất dài, nhưng đó là một cách tiếp cận rất có khả năng sẽ luôn hoạt động.

self.ToData = function() { 
    return ko.toJS({ 
     Name: self.Name, 
     Address: self.Address, 
     City: self.City, 
     State: self.State, 
     PostalCode: self.PostalCode 
    }); 
};