Aurelia，如何进行可选绑定

Question

Aurelia 是否支持可选绑定？我在任何地方都找不到这些信息。我遇到的问题是我有一个 title 属性，它可能会或可能不会填充到对象数组中。我使用repeat.for 和title.bind，但如果此属性不是对象数组的一部分，我根本不希望该属性存在。 Aurelia 有可能吗？

将Bootstrap-Select 与空的title 一起使用时会引发错误。让Aurelia 即时创建属性将解决我的问题。

我目前的代码是这样的

<select class="selectpicker" value.bind="value" options.bind="options" disabled.bind="disabled">
<option repeat.for="option of options" model.bind="option"
        data-subtext.bind="option.subtext"
        title.bind="option.title">
        ${option.name}
</option>

在这个例子中，我想将data-subtext 和title 作为可选属性。这可行吗？

由于这是一个自定义元素，我尝试删除对象 delete this.element.title 的 title 属性，但这似乎不起作用。我也尝试过使用 jquery，但还是没有运气。

Answer 1

我没有在很多情况下对此进行测试，但我认为您也可以创建自定义绑定行为，如下所示：

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

然后像这样使用它：

<a href.bind="message & optional">${message}</a>

Answer 2

只有当属性存在时，您才能使用生成title 属性的自定义属性。例如：

export class OptionalTitleCustomAttribute {

  static inject = [Element];

  constructor(element) {
    this.element = element;
  }

  valueChanged(newValue) {
    if (newValue) {
      this.element.setAttribute('title', newValue);
    } else {
      this.element.removeAttribute('title');
    }
  }

}

运行示例：https://gist.run/?id=f7f89f35b62acb5b4f05ffe59be1880e