当父值从子项更改为DI时,在父视图中刷新绑定

Question

目标是能够在SharedParent和/或SharedState视图中更新"heading",只要它从子项通过DI更改.

我怀疑layout-view和layout-view-modelAurelia路由器自定义元素有问题.

我需要这个,因为真实代码中的SharedParent,将是抽象的一般计算函数(保存在SharedParent中的变量,当前未在视图中更新)等孩子们将调用(以避免每个孩子复制此功能) ).理想情况下引用SharedParent的DI引用.

理想的解决方案可以直接修改父级.SharedState只是一种额外的测试方式,如果你能看到一种方法让它与选项1一起使用,可以忽略它

选项1是我工作的最高优先级

在这里查看实时运行要点:https://gist.run/？ id = 66eeff540a4665694a31482b790bf01e

更新

我已经制作了另一个要点,以显示我为了使父/子关系正常工作而尝试的另一种方式:https://gist.run/？id = 080d4ac3f4d8677d344140a7827aea94 - 在这个例子中,当前路线只是另一个问题由于路由器中的重复"路由"属性,未正确设置.但在这里,至少我们能够从子节点更新父属性.理想的解决方案是同时使用1个解决方案.这样就可以正确设置活动路径,并且子项将能够更新依赖注入父项的属性.最后,父视图需要刷新此更改.这个要点来自另一个问题:如何从链接到父/子视图/控制器的路径动态构建导航菜单 - 但稍微修改以帮助说明在这个问题中没有用的东西,确实在这里工作.

把它们加起来.

我首先尝试用这种方式解决我的问题:https://gist.run/？id = 080d4ac3f4d8677d344140a7827aea94 - 几乎所有的工作都应该如此(从孩子的父级设置标题)并在子视图中反映父母的日期/语言的变化 - 从子节点获取和设置父属性.唯一不起作用的是路由.我无法显示活动路由,因为多个路由共享相同的"路由"属性.

所以我看向布局视图(-model)解决方案(我在这个问题中提出的那个) - 这似乎解决了路由问题,但打破了父/子之间的绑定.

Answer 1

ChildA在构建router-view上指示的layout-view和layout-view-model之前，由容器构建。这意味着容器必须创建一个新的实例SharedParent（我们称之为“实例1”）来提供给 的ChildA构造函数。

随后，构建了路由器视图的布局视图模型（SharedParent）。当容器构造自定义属性、自定义元素和路由器视图模型时，模板系统的默认行为是告诉容器“给我一个新实例，不要重用现有实例”。这很有意义，大多数时候，您不希望<my-number-input>表单上出现的所有 10 个元素都是同一个实例，就像您不希望<input>表单上的 10 个标准 html 元素相同一样。 .你希望他们独立。因此，构造了第二个实例SharedParent，这就是为什么您的标头代码不起作用...具有与路由器视图ChildA不同的实例。SharedParent

使用@singletononSharedParent可以解决这个问题，但更好的方法是使用SharedParent,ChildA并ChildB依赖于一个SharedState类（例如@inject(SharedState)）。这将不需要覆盖默认行为，使共享依赖关系更加清晰，并保持SharedParent和之间的关注点良好分离ChildA。

class SharedState {
  heading = '';
  ... other shared items ...
}

这是一个例子：https://gist.run/?id =dfe291e3da67854d143d264a2edd5ade