Question

在实现class.bind时，我遇到了一个问题（至少我认为这是一个问题），我真的不喜欢在视图中有太多的逻辑，并且正在考虑转移到组件的模型但是它看起来很棘手。我正在实施步骤进度条

<template >
  <ul class="all-steps">
    <li repeat.for="step of steps" class.bind="current === step ? 'active': (previous.indexOf(step) >= 0 ? 'done':'')">${$index + 1}</li>
  </ul>
</template>

有什么方法可以移动所有这个类为视图分配逻辑吗？我尝试使用脏绑定创建绑定函数，但显然从视图中传递step导致Unhanded rejection exception任何建议都值得赞赏

Answer 1

您需要做的就是编写一个采用各种参数的函数。最好的部分是这不会触发脏检查。如果参数值发生变化，Aurelia将仅调用该函数。

以下是一个示例：https://gist.run?id=837b35139b924682143e74f4e7ca85ba

<强> app.html

<template>
  <ul class="all-steps">
    <li repeat.for="step of steps" class="${calculateClass(current, step)}">Step 1: ${$index + 1} (${calculateClass(current, step)})</li>
  </ul>
</template>

<强> app.js

export class App {
  current = 3;
  steps = [ 1, 2, 3, 4, 5 ];
  previous = [ 1, 2 ];

  calculateClass(current, step) {
    console.log(`called. current = ${current}, step = ${step}`)
    if(current === step) {
      return 'active';
    } else if (this.previous.indexOf(step) >= 0 ) {
      return 'done';
    } else {
      return '';
    }
  }
}

<强>的index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      li {
        background-color: green;
      }

      li.active {
        background-color: yellow;
      }

      li.done {
        background-color: red;
      }
    </style>
  </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>

如何在Aurelia repeat.for中将class.bind条件从视图移动到模型

1 个答案: