Aurelia 2 пользовательских элемента (уже разделяет представление через @) делает почти то же самое, как рефакторинг?

Question

Вот моя проблема: Aurelia приложения:

несколько пользовательских элементов (уже разделяя точку зрения через @UseView) делает почти то же самое (удельная функ Шоуда определяется каждым сам элемент), как управлять общим кодом (inkl @bindable)? Как реорганизовать это: https://gist.run/?id=897298ab1dad92fadca77f64653cf32c

Answer 1

«Общий» код вы ссылаетесь в вашем вопросе есть жизненный цикл связанных вещей в ваших пользовательских элементах, которые не очень подходят для совместного использования. Вам нужно будет наследовать, и с помощью настраиваемых элементов, которые настраивают себя на множество головных болей.

Вместо того, чтобы использовать код, почему бы не сосредоточиться на вещах, которые являются переменными, и попытаться настроить их? Взглянув на ваш смысл, это, безусловно, самое прямое решение здесь.

Скажем, у вас есть пользовательский элемент, который вызывает функцию при изменении свойства. Эта функция должна отличаться для некоторых экземпляров элемента. Вы могли бы добиться этого с привязываемой функцией и использовать .call поведения, например, так:

некоторые-element.js

import { bindable } from 'aurelia-framework'; 

export class SomeElement { 

    @bindable value; 
    @bindable processValue; 

    valueChanged(newValue, oldValue) { 
     if (this.processValue) { 
      this.processValue({ val: newValue }); 
     } 
    } 
} 

consumer.html

<some-element value.bind="myValue" process-value.call="myFunc(val)"></some-element> 
<some-element value.bind="anotherValue" process-value.call="anotherFunc(val)"></some-element> 

consumer.js

myFunc(val) { 
    console.log("val: " + val); 
} 

anotherFunc(val) { 
    console.log("val: " + val); 
}