Question

在我目前的项目中，我们在一个viewModel中有一个带有许多observable和可观察数组的概念模型，以及修改数据的行为。在项目的后期，我们想要拆分一个屏幕上的信息。分为两个屏幕。这导致了如何拆分viewModel，因此每个屏幕只处理它的数据行为。最终发现这很难分开，我们将同一个viewModel绑定到两个＆＃34;屏幕＆＃34;。

我想知道是否有办法让一个单独的模型＆＃34;对象存储可观察的/可观察的数组，允许您进行依赖性跟踪。这样，您可以共享此模型对象，包含数据和依赖关系跟踪。之后，每个屏幕的viewModel都包含特定于该屏幕的行为吗？

我知道我可以拥有一个包含可观察对象的单独模型对象，并使用＆＃34;＆＃34;在两个viewModel中绑定该模型，但我想知道是否有另一种方式。

Answer 1

是的。

从Knockout版本3.2.0开始，您可以使用＆＃34; Knockout Web Components＆＃34;

让我们想象你想制作一个＆＃34;徽章＆＃34;，就像这样

<div class="badge">
  <h1>Name: <span>Joe Blogs</span></h1>
  <h3>Position: <span>Engineer</span></h3>
</div>

现在，让我们从可重复使用的角度来看待这一点。

您可能想要动态更改的位是名称和位置

如果你已经在Knockout中使用了这些，你可能会遇到以下情况：

<div id="thebadge" class="badge">
  <h1>Name: <span data-bind="text: name">xxx</span></h1>
  <h3>Position: <span data-bind="text: position">xxx</span></h3>
</div>

然后你可能会将它与Knockout一起使用，如下所示：

var BadgeViewModel = { name：ko.observable（＆＃39; Joe Blogs＆＃39;），职位：ko.observable（＆＃39;工程师＆＃39;） };

然后使用以下内容将其应用于您的html：

ko.applyBindings(BadgeViewModel);

注意：我只是在这里做一些事情来演示这个概念

到目前为止，这么好......这是经典的做事方式，如果你有这样做，那么把它转换成一个组件并不困难。

您只需将视图模型和html模板组合到一个实体中即可。

所以对于我们这里的例子，我们可能会使用：

ko.components.register("my-badge", {
  viewModel: function(data) {
    this.name = (data && data.name) || "Not Defined";
    this.position = (data && data.position) || "Not Defined";
  },
  template: '<div id="thebadge" class="badge"><h1>Name: <span data-bind="text: name">xxx</span></h1><h3>Position: <span data-bind="text: position">xxx</span></h3></div>'
});

注册组件后，您可以在html标记中使用它的注册名称，如下所示：

<my-badge></my-badge>

您的徽章就会出现。

但问题是，您没有初始化任何数据。

如果您在第二个示例代码中查看VM，您会看到我们有一个＆＃39;数据＆＃39;对象传递给我们的模型，我们检查它是否存在，以及我们的名称和位置属性。

如果他们没有让他们平等'＃34;未定义＆＃34;

要传递参数，只需使用params属性，如下所示：

<my-badge params="name: 'Joe Blogs', position: 'engineer'"></my-badge>

这将使组件可以使用名为 name 和 position 的属性。

重复使用很简单，只需重复标记，例如：

<my-badge params="name: 'Joe Blogs', position: 'Engineer'"></my-badge>
<my-badge params="name: 'Fred Blogs', position: 'Scientist'"></my-badge>
<my-badge params="name: 'Andrew Blogs', position: 'Developer'"></my-badge>
<my-badge params="name: 'Tony Blogs', position: 'Manager'"></my-badge>

有很多更好的方法，如果您阅读淘汰JS网站上的组件文档，他们建议您使用requirejs或其他模块加载器来帮助您仅在需要时加载html块。

如果将它们保存在单独的.js文件中，只需使用它们一次或两次即可提供可重复使用的视图，这很容易。

可以将依赖跟踪与淘汰赛中的行为分开吗？

1 个答案: