0

我正在使用组件在一个或另一个视图之间进行切换。这就是我被建议做的事情。

现在，每次我在视图之间进行更改时，都会再次加载数据。 这是该问题的再现。（检查控制台）。

在我提供的示例中，这并不是什么大问题，但是在调用外部 API 时，它是一个大问题。

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

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

我应该使用 jQuery / Javascript 使用 ajax 调用 API，然后在视图模型中设置数据吗？

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

1 回答 1

3

问题是在您的组件定义中，您使用的是为组件指定的构造函数方法viewModel，因此每次使用该组件时，它实际上是在实例化一个全新的视图模型。

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

请注意，它调用它一次是因为您调用了new 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);

如果这对您的整个项目来说是正确的方法，您将不得不决定长期，有几种方法可以将数据传递到组件中，这只是其中一种。

这是一个更新的 fiddle，只记录loading data一次。

于 2015-08-13T15:20:32.417 回答