1

假设您有一个包含以下视图模型的产品概览页面：

  • 产品索引视图模型；绑定到整个页面的根视图模型
    • 产品列表视图模型；用于显示所有产品的小部件
    • 产品注册视图模型；用于注册新产品的小部件

小部件是通过使用自定义 HTML 元素（例如<product-list></product-list>和<product-registration></product-registration>）加载的。这很棒，因为我不必将这些小部件的任何知识放在我的根模型中。但是，我还想在用户注册新产品后刷新产品列表。简而言之：

如何从 ProductRegistrationViewModel 向 ProductListViewModel 发送信号？

我已经查看了Knockout Postbox，但这似乎并不能解决问题。如果我有多个产品列表并且我只想刷新其中一个怎么办？理想情况下，我想在组件的视图模型上实现一系列公共方法。然后从我的页面的根视图模型将两者联系在一起，如下所示：

var ProductIndexViewModel = function() 
{
    var productRegistrationComponent = ??;
    var productListComponent = ??;

    productRegistrationComponent.onRegistrationComplete(function() {
      productListComponent.refresh();
    };
}

但是，我无法从这里访问这些视图模型。还是我？

如何从我的根视图模型访问子视图模型？

最后，如果有人看到我的问题的更好解决方案：我全神贯注！

4

2 回答 2

3

听起来他们应该共享一个可观察的数组（产品列表）。我认为最好在根模型中定义此列表并将其传递给依赖它的小部件。如果两个组件共享相同的 observable，则不必担心两个组件之间的通信。您的 HTML 可能如下所示<product-list data-bind="list: $root.allProducts"></product-list>：

如何从我的根视图模型访问子视图模型？

如果您愿意，您可以使用它ko.contextFor来获取 HTML 元素的上下文。

于 2014-09-10T14:51:00.587 回答
2

我最近才做这种事情。在我的方法中，我的组件创建了一个 API 对象，该对象分配给由父组件传入的 observable。例如，我有一个由组件包装的数据表，我希望能够找到选定的行：

pageModel = function() {
  this.dtAPI = ko.observable();
}

ko.applyBindigns(new pageModel());

<datatable params="api: dtAPI, data: getTableData()"></datatable>

在组件内部，您可以将 observable 设置为对组件 API 的引用，以便其他人可以调用对它的调用。就我而言，我并没有完全这样做，我将 API 暴露给数据绑定，以便稍后可以操作数据绑定元素（在这种情况下，它是一个数据表绑定：

if (binding.api != null)
{
    // expose datatable API to context's api binding.
    binding.api({
        getSelectedData: function() { return _getSelectedData(element);}
    });
}

然后在主（父）组件中，您可以执行以下操作：

dtAPI.getSelectedData();

到目前为止，我发现这种模式作为一种从内部组件公开行为的方法很有用。

于 2015-02-16T17:15:18.627 回答