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

Question

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

这是我想要使用的绑定行为

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

并尝试import './optional-binding.js'; 直接在自定义元素内，但在所有情况下，它一直说它找不到这个绑定。

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

编辑

我尝试使用@janmvtrinidad的建议来导入带有require的绑定行为，但是我在尝试在ViewModel中导入它时获得了类似的结果。 另请注意，我的所有文件都在同一目录中，因此使用./应该足够了。 到目前为止，我一直在声明与自定义元素相同的文件中的绑定行为，这是它到目前为止唯一的工作方式。

自定义元素视图（模板）内

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

我得到了它无法找到的错误

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

整个守则/项目

我也在不久前向社区发布了这个插件，如果你想查看整个代码，插件可以作为Aurelia-Bootstrap-Select使用 。 目前，如果有人想要使用它并且还有一个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。

编辑

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

目前这是不可能的。 Aurelia viewResources是一个单身人士。 我相信，您可以使用上面第二个子弹中所述的require将其添加到您的html上。