如何在自定义元素和它自己的命名空间中添加绑定行为？

Question

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

下面是我想使用的绑定行为

可选-binding.js- 由另一个堆栈问题提供的代码

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
  };

并且尝试直接在Custom元素中import './optional-binding.js';，但是在所有情况下，它都说它找不到这个绑定。

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

编辑

我尝试过使用require导入绑定行为的建议@janmvtrinidad，但我得到的结果与以前在ViewModel中导入绑定行为的结果相似。还要注意，我的所有文件都在同一个目录中，所以使用./就足够了。到目前为止，我一直在声明与自定义元素相同的文件中的绑定行为，这是到目前为止它唯一的工作方式。

在自定义元素视图中(模板)

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

我知道它找不到它

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

完整代码/项目

不久前，我还向社区发布了这个插件，如果您想查看整个代码，插件可以作为Aurelia-Bootstrap-选择提供。目前，如果有人想要使用它，并有一个OptionalBindingBehavior，那么名称冲突将发生，这是一个令人沮丧的。

注意事项

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

Answer 1

假设您的代码结构是由Aurelia CLI生成的，其中元素、绑定-行为等都在resources文件夹中。现在，您可以将绑定行为和自定义元素添加为globalResources。在resources/index.ts中，在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。更多信息，这里。
• 也可以在html中显式地require它。它将覆盖globalResources，然后在html中使用您的自定义资源，即使globalResource与您的自定义绑定行为/资源具有相同的ClassName。

编辑

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

目前是不可能的。奥雷利亚viewResources是一个单身。正如我所相信的，使用require将其添加到html中就足够了，如上面第二个项目所述。