如何创建自定义属性以添加 if.bind？

Question

我想创建一个属性来根据某些全局状态显示或隐藏元素。

示例：

<div state='new,unknown'>yadayadayada</div>

此属性随后会将 div 元素有效地转换为：

<div if.bind="['new','unknown'] | state & signal : 'state-change'">...</div>

状态值转换器会将数组转换为布尔值。

目标是如果当前全局状态是任何提供的状态，则显示元素，否则隐藏它。

我不想要包含 compose 的自定义元素。

Answer 1

您可以创建一个属性并将 if 绑定到那个属性。像这样：

import {computedFrom} from 'aurelia-framework';

export class MyViewModel {

  @computedFrom('something', 'someOtherValue')
  get globalState() {
     //do all conditions you need
     if (myArray.indexOf('something') != -1 && someOtherValue) {
       return true;
     }

     return false;
  }
}

那么你只需要绑定：

<div if.bind="globalState"></div>

Answer 2

Aurelia 作弊 sheet 有一个 example of naive-if custom attribute。我基于它制定了一个解决方案。唯一的区别是：

计算显示或隐藏的逻辑（当然）
也订阅全局状态，而不仅仅是 valueChanged

代码：

import {BoundViewFactory, ViewSlot, customAttribute, templateController, inject} from 'aurelia-framework';
import {BindingEngine} from 'aurelia-binding';
import {State} from './state';

@customAttribute('naive-if')
@templateController
@inject(BoundViewFactory, ViewSlot, BindingEngine, State)
export class NaiveIf {
  constructor(viewFactory, viewSlot, bindingEngine, state) {
    this.show = false;
    this.viewFactory = viewFactory;
    this.viewSlot = viewSlot;
    this.bindingEngine = bindingEngine;
    this.state = state;
  }

  bind() {
    this.updateView();
    this.subscription = this.bindingEngine.propertyObserver(this.state, 'value')
      .subscribe((newValue, oldValue) => this.updateView());
  }

  unbind() {
    if (this.subscription) this.subscription.dispose();
  }

  valueChanged(newValue) {
    this.updateView();
  }

  updateView() {
    let isShowing = this.show;
    let showStates = this.value.split(',');
    this.show = showStates.indexOf(this.state.value) != -1;

    if (this.show && !isShowing) {
      let view = this.viewFactory.create();
      this.viewSlot.add(view);
    } else if (!this.show && isShowing) {
      this.viewSlot.removeAll();
    }
  }
}

或~~GistRun~~

如何创建自定义属性以添加 if.bind？

How can I create custom attribute to add a if.bind?

javascript

attributes

aurelia