奧裏利亞小抄有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
您的'GistRun'鏈接已經死亡。 – m7913d