Question

我构建了用于创建菜单的基本工具，可以在其中附加多个（相同的）源项目（一对多）。这并不是真正的合并，因为我需要源项目是可编辑的，并且数据需要在菜单中绑定到其所有实例。这涉及两个数组：一个数组 Source ，另一个数组 Menu ，其中公共ID连接项目和子项目的ID。菜单包含用于覆盖/自定义的输入。

我遇到的问题是在进行更改时刷新数据。随着数据的更改，我不得不在两个不同的地方使用$.templates("#myTmpl").link("#renderMenu", data)。这不理想，因为它会重新呈现所有内容；尽管就我而言，所有东西都是双向数据绑定的，所以没有损失。 view.refresh()也不起作用

我认为问题在于，itemVar的基础数据发生更改时未更新... itemVar用于单次渲染。我也尝试过像itemVar这样的^~items=myItems来代替助手，但它们也不起作用。

所以问题是如何在不诉诸<$.templates("#myTmpl").link("#renderMenu", data)>

的情况下触发某些视图/部分的刷新

要测试：

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

也许有更好的方法来构建此工具或其一部分；因为它包含一些技巧（filter ... step=100）和可能不必要的“ for”循环。我承认...我花了5个版本来构建，因为要使所有事物协同工作非常棘手。

任何指针将不胜感激。

显示问题的小提琴：https://jsfiddle.net/alnico/mt5d2v7j/
所有渲染的项目上都有ID供调试。

Answer 1

您对itemVar不更新是正确的-从某种意义上来说，如果添加了新的数组项，则该项的视图没有itemVar上下文参数（例如{{1} }）。我将在下次更新中修复该问题。我在https://github.com/BorisMoore/jsviews/issues/424处创建了一个问题，您可以使用在那里找到的更新的jsviews.js文件对其进行测试。

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

~currentItem

但是{^{for ~root[1].allItems filter=~menuItem id=id}}过滤器取决于menuItem，因此只要id发生变化，都需要刷新。您可以通过声明对menuItem函数的依赖来实现：

id

或使用mapDepends：

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

您可以通过删除{^{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}}

像这样使用：

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

如果这样做，则不再需要在过滤器函数上使用mapDepends或.depends。 {^{:#index}} {^{for ~getItem(id)}} {^{if ~currentItem.isNewItem != '1'}}中的更改将触发id

的刷新

呈现两个通过ID链接并具有双向数据绑定的数组

1 个答案: