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'
    ]);
}

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

就命名空间而言，当您尝试全局注册具有相同 ClassName 的两个资源时，Aurelia 会抛出错误。当你在这种情况下跑步时，你有两种选择。

• 您可以使用@CustomElement装饰@CustomAttribute器来覆盖现有约定。默认约定将假设您的 ClassName 将从 转换InitCaps为dash-case。更多信息请参见此处。
• 或者你可以require在你的 html 中明确它。它将覆盖 globalResources，然后在 html 中使用您的自定义资源，即使 globalResource 与您的自定义绑定行为/资源具有相同的 ClassName。

编辑

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

目前这是不可能的。AureliaviewResources是单身人士。我相信，您使用require上面第二个项目符号中的说明将其添加到 html 中就足够了。