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

Question

I am building an Aurelia Custom Element and I want to use a special Binding Behavior, however I can't seem to be able to use it (declare it) outside of my Custom Element class. Also, I was wondering if namespace exist in Aurelia for Binding Behaviors and other custom stuff?

Here's the Binding Behavior that I want to use

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

I tried import this way

index.js

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

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

  export {
    MyCustomElement
  };

and also tried to import './optional-binding.js'; directly inside the Custom Element but in all cases, it keep saying that it can't find this binding.

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.

EDIT

I tried the suggestion of @janmvtrinidad to import the binding behavior with a require but I get similar result as I had before when trying to import it in the ViewModel. Also note that all my files are within the same directory, so using ./ should be sufficient. Up until now, I'm stuck in declaring the binding behavior inside the same file as the custom element, that is the only way it works so far.

inside the Custom Element View (template)

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

I get the error that it can't find it

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

Entire Code/Project

I also released this plugin to the community some time ago, if you want to see the entire code, the plugin is available as Aurelia-Bootstrap-Select . Currently if someone wants to use it and also has an OptionalBindingBehavior then name collision will happen, which is a bummer.

NOTE

Even after I posted a bounty, I am still waiting for the correct way of dealing with namespace to avoid name collision in Aurelia.

Answer 1

Assuming that your code structure is generated by Aurelia CLI where elements, binding-behaviors, etc. is in resources folder. Now you can add your binding-behaviors and custom element as a globalResources . In your resources/index.ts , add your binding-behavior path inside config.globalResources([...]) .

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

Now you can use your resources globally without require in your html.

In terms of namespaces, Aurelia will throw an error when you try to register globally two resources with the same ClassName. You have two options when you run in this situation.

• You can use @CustomElement and @CustomAttribute decorator to override the existing convention. Default convention will assume your ClassName will be converted from InitCaps to dash-case . More information here .
• Or you can explicitly require it in your html. It will override the globalResources then use your custom resources inside your html even the globalResource has the same ClassName with your custom binding-behavior/resource.

EDIT

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.

Currently it is not possible. Aurelia viewResources is a singleton. As I believe, it is sufficient for you to add it on your html using require as stated in the 2nd bullet above.