Question

允许使用img:encode(type, filename)而不是在类绑定中添加代码的正确方法是什么，就像app.html中的这一行function一样？在knockout中使用时的这种示例将分别更新类绑定，即使observable在函数内部。

以下是一个例子：https://gist.run?id=d2b120bcd3d6a8157f4d4c9bf247988b

app.html

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

app.js

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

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

的index.html

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

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

的style.css

<!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>

Answer 1

绑定到计算属性时应使用getter函数。例如：

JS

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>

Aurelia css绑定功能

1 个答案: