使用 knockout.js 防止组件更改时再次加载数据

Question

我正在使用组件在一个或另一个视图之间切换。那是 .

现在每次我在视图之间切换时，都会再次加载数据。 Here's a reproduction of the issue.（检查控制台）。

在我提供的示例中这不是什么大问题，但是在调用外部 API 时却很重要。

我怎样才能避免这种情况？

作为一个相关问题，目前它在加载时两次调用 API（或在我的示例中加载数据）。每个注册组件一次。那也不应该是那样的。

我是否应该使用 jQuery / Javascript 来调用 API 和 ajax 然后一旦我在视图模型中设置了数据？

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

Answer 1

问题在于，在您的组件定义中，您正在使用 constructor function 方法为组件指定 viewModel，因此每次使用该组件时，它实际上是在实例化一个完整的组件新视图模型。

And as a related problem, at the moment it is calling the API (or loading the data in my example) twice on load. Once for each registered component. That shouldn't be like that either.

请注意，它调用了一次，因为您自己调用了 new viewModel()，而在实例化额外视图模型时显示的初始组件又调用了一次。它没有记录两次，因为您注册了两个组件 - 如果您 register more components，您会看到它仍然只记录了两次。

一个快速解决方法是使用 shared object instance 方法指定 viewModel:

var vm = new viewModel();

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

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

ko.applyBindings(vm);

从长远来看，如果这对您的整个项目来说是正确的方法，您必须做出更长期的决定，有多种方法可以将数据传递到组件中，这只是其中之一。

这是一个 updated fiddle，它只记录 loading data 一次。

使用 knockout.js 防止组件更改时再次加载数据

Prevent load data again on component change with knockout.js

knockout.js

knockout-3.0

knockout-3.2