Aurelia verwenden, wie ein Standardwert für eine benutzerdefinierte Attribut

Question

Ansicht

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

view-Modell

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

Ich erwarte einzustellen, dass color='orange'; im Ansichtsmodell zu Farbe so auf der Karte ansehen würde Einstellen der Standardfarbe als Orange. Das Ändern der Farbe in dem Eingabefeld funktioniert wie erwartet. Ich weiß, dass Sie this.value zu einer Farbe als Ihre Standardfarbe nur einstellen können, aber ich dachte gerade, dass die Bindung die gleiche Weise wie im skeleton-nav arbeiten würde, wo die Eingabefelder Standardwerte für firstName und lastName

haben

Answer 1

Beachten Sie zuerst das this.color wird nirgendwo im Code ViewModel verwendet, so dass das Setzen von Code wirklich nichts im Code tut, wie er existiert.

Nach etwas herumspielen, habe ich festgestellt, dass Ihre beste Wette in dieser spezifischen Situation sein wird, die Hintergrundfarbe im Konstruktor zu setzen und die bind Funktion loszuwerden. Ich habe eine gist.run schaffen hier: https://gist.run/?id=a15e0305f082f6ef080364caff2a1ec1

Hier die VM für das benutzerdefinierte Attribut ist:

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

Sie können die die Prüfung für leere Zeichenfolge auf color in valueChanged, abhängig von Ihrem entfernen möchten Anwendungsfall.