Использование Аурелия, как установить значение по умолчанию для пользовательского атрибута

Question

вид

<template> 
    <div single-value-attrib="${color}"></div> 
    <div single-value-attrib.bind="color"></div> 
    <input type="text" value.bind="color" /> 
</template> 

вид-модель

export class SingleValueAttribCustomAttribute { 
    static inject = [Element]; 
    color = 'orange'; 
    constructor(element) { 

    this.element = element; 
    this.element.style.width = this.element.style.height = '100px'; 
    } 

    bind() { 
    this.element.style.backgroundColor = this.value; 
    } 

    valueChanged(newValue, oldValue) { 
    this.element.style.backgroundColor = newValue; 
    } 
} 

Я ожидал, что color='orange'; в ViewModel будет отображаться в цвете на представлении, таким образом, установив цвет по умолчанию как оранжевый. Изменение цвета в поле ввода работает так, как ожидалось. Я знаю, что вы можете просто установить this.value в качестве вашего значения по умолчанию, но я просто подумал, что привязка будет работать так же, как и в скелете-nav, где поля ввода имеют значения по умолчанию для firstName и lastName

Answer 1

Прежде всего обратите внимание, что this.color не используется нигде в режиме просмотра кода, поэтому установка его действительно ничего не делает в коде, поскольку он существует.

После некоторого разыгрывания я решил, что наилучшим выбором в этой конкретной ситуации будет установка цвета фона в конструкторе и избавление от функции bind. Я создать gist.run здесь: https://gist.run/?id=a15e0305f082f6ef080364caff2a1ec1

Вот ВМ для пользовательского атрибута:

export class SingleValueAttribCustomAttribute { 
    static inject = [Element]; 
    defaultColor = 'orange'; 
    constructor(element) { 

    this.element = element; 
    this.element.style.width = this.element.style.height = '100px'; 
    this.element.style.backgroundColor = this.defaultColor; 
    } 

    valueChanged(color) { 
    if(color.trim() !== '') { 
     this.element.style.backgroundColor = color; 
    } 
    } 
} 

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