Aurelia.js Ändere Textwert, wenn Knopf gedrückt wird

Ich kann die Knopffarbe ändern, wenn dieses geklickt wird, aber wie kann ich den Text ändern, wenn angeklickt wird?Aurelia.js Ändere Textwert, wenn Knopf gedrückt wird

Änderungstext von klicken auf geklickt

Html:

<button type="button" class="btn ${clicked ? 'btn-danger' : 'btn-primary'}" click.trigger="handleClick()">Click</button>

JS ...

clicked = false; 

    handleClick(){ 
    this.clicked = !this.clicked; // toggle clicked true/false 
    return true; // only needed if you want to cancel preventDefault() 
    }

Quelle

2017-05-08 Raduken

Ich würde die s versuchen ame mit dem Text in der Schaltfläche, die Sie mit der Klasse taten

<button type="button" class="btn ${clicked ? 'btn-danger' : 'btn-primary'}" click.trigger="handleClick()"> 
    ${clicked ? 'Clicked' : 'Click'} 
</button>

Entweder das, oder auf den Button Text in eine Variable einstellen, und es in der handleClick Funktion zu verändern.

Quelle

2017-05-08 08:55:27 Josh

Sie können auf das Element zugreifen, indem Sie das Attribut ref verwenden. Es wird auch empfohlen, .delegate statt .trigger wann immer möglich zu verwenden. Weitere Informationen finden Sie unter here.

Hier ist ein Beispiel: https://gist.run?id=99524bb7fee9d0b7272741477c1fffb8

app.html

<template> 
    <button ref="btn" click.delegate="onClick(btn)">Click Me!</button> 
</template>

export class App { 
    message = 'Hello World!'; 
    onClick(button) { 
    button.innerText = 'Clicked!' 
    } 
}

index.html app.js

<!doctype html> 
<html> 
    <head> 
    <title>Aurelia</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body aurelia-app> 
    <h1>Loading...</h1> 

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> 
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> 
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> 
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> 
    <script> 
     require(['aurelia-bootstrapper']); 
    </script> 
    </body> 
</html>

Quelle

2017-05-08 08:58:57 janmvtrinidad

Aurelia.js Ändere Textwert, wenn Knopf gedrückt wird

Antwort

Verwandte Themen