Question

我使用组件在一个或另一个视图之间进行更改。那是what I was recommended to do。

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

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

我该如何避免？

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

我应该使用jQuery / Javascript来调用带有ajax的API，然后一旦我将数据设置在viewmodel中吗？

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

Answer 1

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

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

请注意，它调用它一次是因为您自己调用了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防止组件更改时再次加载数据

1 个答案: