Aurelia css привязка с функцией

Что было бы правильным способом разрешить использование function вместо добавления кода внутри класса bind, как эта строка <div class.bind="isSuccess ? 'success' : 'error'">${message}</div> в app.html? Этот пример при использовании в нокауте обновит соответственно привязку класса, даже если наблюдаемый находится внутри функции.Aurelia css привязка с функцией

Вот пример: https://gist.run?id=d2b120bcd3d6a8157f4d4c9bf247988b

app.html

<template> 
    <div class.bind="getColor()">${message}</div> 
    <div class.bind="isSuccess ? 'success' : 'error'">${message}</div> 

    <button click.delegate="toggleColor()">toggle color</button> 
</template>

app.js

export class App { 
    message = 'hello worlds'; 
    isSuccess = false; 
    toggleColor() { 
    this.isSuccess = !this.isSuccess; 
    } 

    getColor() { 
    return this.isSuccess ? 'success' : 'error'; 
    } 
}

index.html

<!doctype html> 
<html> 
    <head> 
    <title>Aurelia</title> 
    <link rel="stylesheet" href="https://gist.host/run/1479356763275/style.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body aurelia-app> 
    <h1>Loading...</h1> 

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script> 
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script> 
    <script> 
     System.import('aurelia-bootstrapper'); 
    </script> 
    </body> 
</html>

style.css

/* Styles go here */ 

.success { 
    background-color: green; 
} 

.error { 
    background-color: red; 
}

источник

2016-11-17 janmvtrinidad

Вы должны использовать функцию геттер при связывании с вычисленными свойствами. Например:

import {computedFrom} from 'aurelia-framework'; 

export class App { 
    message = 'hello worlds'; 
    isSuccess = false; 
    toggleColor() { 
    this.isSuccess = !this.isSuccess; 
    } 

    @computedFrom('isSuccess') //use @computedFrom to avoid dirty-checking 
    get getColor() { 
    return this.isSuccess ? 'success' : 'error'; 
    } 
}

HTML

<div class.bind="getColor">${message}</div>

источник

2016-11-17 04:56:20

Это [работы] (https://gist.run/?id=b939325a584a979c2e6ad28f02290a24). Благодарю. – janmvtrinidad

ответ

Смежные вопросы