javascript - Aurelia 如何在自定义元素及其自己的命名空间中添加绑定(bind)行为？

Question

我正在构建一个 Aurelia 自定义元素，我想使用一个特殊的绑定(bind)行为，但是我似乎无法在我的自定义元素类之外使用它(声明它)。另外，我想知道 Aurelia 中是否存在用于绑定(bind)行为和其他自定义内容的命名空间？

这是我想使用的绑定(bind)行为

optional-binding.js - code provided by another stack question

export class OptionalBindingBehavior {
  bind(binding, scope, interceptor) {
    binding.originalupdateTarget = binding.updateTarget;
    binding.originalTargetProperty = binding.targetProperty;
    binding.updateTarget = val => {
      if (val === undefined || val === null || val === '') {
        binding.targetProperty = null;
      } else {
        binding.targetProperty = binding.originalTargetProperty;
      }
      binding.originalupdateTarget(val);
    };
  }

  unbind(binding, scope) {
    binding.updateTarget = binding.originalupdateTarget;
    binding.originalupdateTarget = null;
    binding.targetProperty = binding.originalTargetProperty;
    binding.originalTargetProperty = null;
  }
}

我试过这样导入

index.js

  import {MyCustomElement} from './my-element';
  import './optional-binding.js';

  export function configure(aurelia) {
    aurelia.globalResources('./my-element');
  }

  export {
    MyCustomElement
  };

并且还尝试了 import './optional-binding.js'; 直接在自定义元素中，但在所有情况下，它一直说找不到此绑定(bind)。

我还想知道如何将它变成它自己的命名空间(如果可能的话)，以避免命名与可能由其他代码/项目全局声明的自定义绑定(bind)行为发生冲突。

编辑

我尝试了@janmvtrinidad 的建议，使用 require 导入绑定(bind)行为，但我得到的结果与之前尝试将其导入 ViewModel 时得到的结果相似。另请注意，我的所有文件都在同一目录中，因此使用 ./ 应该就足够了。到目前为止，我一直坚持在与自定义元素相同的文件中声明绑定(bind)行为，这是目前唯一可行的方法。

在自定义元素 View (模板)内

<template>
    <require from="./optional-binding"></require>
    ...

我收到找不到它的错误

Cannot find module './aurelia-bootstrap-select/optional-binding'

整个代码/项目

我前段时间也在社区发布了这个插件，如果你想看完整的代码，这个插件可以作为Aurelia-Bootstrap-Select获得。 .目前，如果有人想使用它并且也有一个 OptionalBindingBehavior 那么名称冲突就会发生，这是一个无赖。

注意

即使在我发布赏金之后，我仍在等待处理 namespace 的正确方法以避免 Aurelia 中的名称冲突。

Answer 1

假设您的代码结构是由 Aurelia CLI 生成的，其中元素、绑定(bind)行为等位于 resources 文件夹中。现在您可以将绑定(bind)行为和自定义元素添加为 globalResources . 在您的 resources/index.ts 中，将您的绑定(bind)行为路径添加到 config.globalResources([...]) 中。

export function configure(config: FrameworkConfiguration) {
    config.globalResources([
        './value-converters/json',
        './binding-behaviors/intercept-one',
        './elements/pagination'
    ]);
}

现在您可以在全局范围内使用您的资源，而无需在您的 html 中添加 require。

在命名空间方面，当您尝试全局注册两个具有相同 ClassName 的资源时，Aurelia 会抛出错误。在这种情况下运行时，您有两种选择。

• 您可以使用 @CustomElement 和 @CustomAttribute 装饰器来覆盖现有约定。默认约定将假定您的 ClassName 将从 InitCaps 转换为 dash-case。更多信息 here .
• 或者您可以在您的 html 中显式要求它。它将覆盖 globalResources，然后在您的 html 中使用您的自定义资源，即使 globalResource 与您的自定义绑定(bind)行为/资源具有相同的 ClassName。

编辑

I would also like to know how to make this into it's own namespace (if possible) to avoid naming collision with custom binding behaviors that might be declared globally by other code/project.

目前是不可能的。 Aurelia viewResources 是一个单例。我相信，如上面第二点所述，使用 require 将其添加到 html 就足够了。