使用基因敲除.js防止組件更改時再次加載數據

Question

我正在使用組件在一個或另一個視圖之間進行切換。 建議我這樣做 。

現在，每次在視圖之間切換時，數據都會再次加載。 這是問題的重制。 （檢查控制台）。

在我提供的示例中，這沒什么大不了的，但是在調用外部API時，這很重要。

我該如何避免呢？

作為一個相關問題，目前它正在加載兩次調用API（或在我的示例中加載數據）。 每個注冊組件一次。 也不應該那樣。

我應該使用jQuery / Javascript用Ajax調用API，然后在視圖模型中設置數據后再使用它嗎？

$.getJSON("/some/url", function(data) { 
    viewModel.setData(data); 
})

Answer 1

問題在於，在組件定義中，您正在使用構造函數功能方法為組件指定viewModel ，因此，每次使用組件時，它實際上是在實例化一個全新的viewmodel。

作為一個相關問題，目前它正在加載兩次調用API（或在我的示例中加載數據）。 每個注冊組件一次。 也不應該那樣。

請注意，它之所以調用一次是因為您自己調用了new viewModel() ，一次是針對實例化額外viewmodel時要顯示的初始組件。 它沒有被記錄兩次，因為您已經注冊了兩個組件-如果您注冊了更多組件 ，您將看到它僅被記錄了兩次。

一個快速解決方案是使用指定viewModel的共享對象實例方法：

var vm = new viewModel();

ko.components.register('summary', {
    viewModel: {instance: vm},
    template: '...'
});

ko.components.register('details', {
    viewModel: {instance: vm},
    template: '...'
});

ko.applyBindings(vm);

您必須決定從長遠來看，如果這對於您的整個項目來說是正確的方法，則有幾種方法可以將數據傳遞到組件中，這只是其中一種。

這是一個更新的小提琴 ，僅記錄一次loading data 。