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上。