自定义元素's绑定上下文-它到底是什么，如何访问父VM

Custom element's Binding Context - what is it exactly, how to access parent VM

本文关键字：何访问 是什么 VM 访问 元素 绑定 上下文 自定义      更新时间：2023-09-26

我在文档中找不到答案，所以我在这里问。传递给自定义元素的bind方法的绑定上下文究竟是什么?它是否等于路由器当前活动的ViewModel?至少，这是我目前所发现的。

为什么它不是元素的父(在DOM术语)VM?

的代码

@customElement("myelem")
@inlineView("<template><content></content></template>")
export class MyElem{
    bind(ctx){
      console.log(ctx);
    }
}
// welcome.html
<myelem>
    <h3>inside myelem</h3>
    <myelem>
      <h4>inside inside ... </h4>
    </myelem>
  </myelem>

控制台的输出只是当前视图模型(Welcome)打印两次。

我希望第一次(外部)myelem是Welcome，但第二次(内部)出现是MyElem…

请解释为什么我在这里错了，以及内部自定义元素如何能够意识到它的实际上下文(我指的是上面情况下的外部)，而不使用丑陋的hack，如在"共享"上下文中创建secret属性(实际上传递给它们的那个)

在数据绑定方面，两个元素被绑定到相同的绑定上下文。考虑这个例子:

<div foo.bind="bar">
  <div foo.bind="bar"></div>
</div>

您希望两个<div>元素具有相同的绑定上下文，对吗?两个元素的foo属性都应该绑定到同一个模型的bar属性。在这个场景中也是如此:

<myelem foo.bind="bar">
  <myelem foo.bind="bar"></myelem>
</myelem>

<myelem>的两个实例被绑定到相同的绑定上下文/模型。

如果我正确理解了这个问题，你会想要一种优雅的方式来给内部MyElem类实例一个对外部MyElem类实例的引用。幸运的是，你正在使用Aurelia，所以有一个很好的方法来做到这一点……使用inject装饰器将其声明为依赖项:

import {inject, Parent} from 'aurelia-dependency-injection';
import {customElement} from 'aurelia-framework';
@customElement("myelem")
@inject(Parent.of(MyElem))
export class MyElem {
  constructor(parent) {
    this.parent = parent;
  }
  ...
}

但是有一个警告…

Aurelia依赖注入容器的默认行为是，如果在容器中没有找到实例，则创建请求项的实例。这意味着@inject(Parent.of(MyElem))不是我们想要的。在没有父MyElem实例的情况下，容器将为我们创建一个，而不是返回null。通常，只有当实例存在于容器中时，我们才会使用@inject(Optional.of(MyElem))告诉容器给我们实例。我不知道如何结合Parent。of和可选的。我将在aurelia依赖注入存储库中创建一个问题，这样我们就可以添加这个特性。

与此同时，我们可以很容易地创建自己的Resolver来结合Parent的行为。of和Optional.of: 
import {resolver} from 'aurelia-dependency-injection';
@resolver()
export class OptionalParent {
  constructor(key) {
    this.key = key;
  }
  get(container) {
    if (container.parent && container.parent.hasResolver(this.key, false)) {
      return container.parent.get(this.key)
    }
    return null;
  }
  static of(key) {
    return new OptionalParent(key);
  }
}

所以MyElem类的新版本看起来像这样:

import {inject} from 'aurelia-dependency-injection';
import {customElement} from 'aurelia-framework';
import {OptionalParent} from './optional-parent';
@customElement("myelem")
@inject(OptionalParent.of(MyElem))
export class MyElem {
  constructor(parent) {
    this.parent = parent;
  }
  ...
}

下面是一个工作示例。检查控制台是否有显示结果的日志消息:

https://gist.run/?id=1a84e0a466fb928aa075

相关文章：