使用双向数据绑定呈现由 ID 链接的两个数组

Question

我构建了这个用于创建 Menu 的基本工具，其中可以附加 multiple/identical Source items（1 个到多个） . 这并不是真正的合并，因为我需要 源项目 可编辑并将数据绑定到菜单中的所有实例。这涉及两个数组：一个是 Source，另一个是 Menu，其中公共 ID 连接项目及其子项目的 ID。菜单包括 override/customization.

的输入

我遇到的问题是在进行更改时刷新数据。随着数据的更改，我不得不求助于在两个不同的地方使用 $.templates("#myTmpl").link("#renderMenu", data) 。这并不理想，因为它会重新渲染所有内容；尽管在我的例子中，一切都在双向数据绑定中，所以没有损失。 view.refresh() 也不行

我认为问题是因为 itemVar 在它的基础数据发生变化时没有得到更新...itemVar 据我所知是单通道渲染。我也试过用助手代替 itemVar，比如 ^~items=myItems...他们也没有用。

所以问题是如何在特定视图上触发刷新's/parts 而不求助于：<$.templates("#myTmpl").link("#renderMenu", data)>

测试：

注释掉第 152 行 $.templates("#menuTmpl").link("#renderMenu", data)
运行
按 插入新项目 并从 select 列表中选择任何项目。
问题出在这里...它不呈现来自源项的匹配项详细信息。我相信这一切都从第 8 行的 itemVar="~currentItem" 开始，其中 itemVar 不会更新也不会触发刷新。但是，基础数据已更改。

也许有更好的方法来构建此工具或其中的一部分；因为它包含一些技巧 (filter ... step=100) 并且可能是不必要的 'for' 循环。我承认...我花了 5 个版本来构建，因为要让所有东西一起工作非常棘手。

任何指点将不胜感激。

Fiddle 显示问题：https://jsfiddle.net/alnico/mt5d2v7j/
所有呈现的项目上都有用于调试的 ID。

Answer 1

关于 itemVar 不更新的说法是正确的 - 从某种意义上说，如果添加了新的数组项，则该项的视图没有 itemVar 上下文参数（例如 ~currentItem 在你的样本中）。我会在下一次更新中修复它。我在此处创建了一个问题 https://github.com/BorisMoore/jsviews/issues/424，您可以使用更新后的 jsviews.js 文件对其进行测试。

您遇到的另一个直接问题是：

{^{for ~root[1].allItems filter=~menuItem id=id}}

但是 menuItem 过滤器依赖于 id，因此每当 id 发生变化时都需要刷新。您可以通过声明对 menuItem 函数的依赖来实现：

$.views.helpers.menuItem.depends = "id";

或使用 mapDepends:

{^{for ~root[1].allItems filter=~menuItem id=id mapDepends='id'}}

您可以通过删除 id=id 并编写

来简化事情

menuItem: function(item, index, items) {
  return item.id == this.view.data.id;
}

或者更好的是，不要在 {{for}} 上使用过滤器，而是直接使用辅助函数 return 过滤的项目：

getItem: function(id) {
  return data[1].allItems.filter(function(item) {
    return item.id == id;
  });
}

这样使用：

{^{:#index}}
{^{for ~getItem(id)}}
  {^{if ~currentItem.isNewItem != '1'}}

如果这样做，您就不再需要使用 mapDepends 或 .depends 来依赖您的过滤功能。 id 中的更改将触发 {^{for ~getItem(id)}}

的刷新

使用双向数据绑定呈现由 ID 链接的两个数组

Rendering two arrays linked by ID's with two-way data binding

jsrender

jsviews