javascript - Aurelia 使用值转换器对打印值进行节流

标签 javascript aurelia

Aurelia 有字符串插值。如果将 stringnumberboolean 绑定(bind)到该变量,则绑定(bind) one-way

但是,如果您绑定(bind)一个对象并使用 ValueConverter ,就像我想要的那样,它就会绑定(bind) one-time

如何使用值转换器来绑定(bind) one-way 而不是 one-time

我尝试过使用 ${data | objectPrinter & oneWay} 但不起作用。

Running code can be found on this gist

app.html

<template>
  <div class="row">

<!-- this isn't updated on change                 -->
    <pre>${data | objectPrinter}</pre>

  </div>

  <input value.two-way="data.branches">

<!-- this gets updated                            -->
  ${data.branches}

</template>

app.js

export class App {
  data = {
    branches: "test"
  }
}

export class objectPrinterValueConverter {
  toView(obj){
    return JSON.stringify(obj, null, 4);
  }
}

index.html

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

最佳答案

Aurelia 将绑定(bind)表达式的文本解析为抽象语法树 (AST),并使用它来确定要观察哪些属性。它仅观察表达式中引用的属性。

在您的示例中,绑定(bind)表达式如下所示:data |对象打印机。该表达式访问 View 模型上的data 属性。这将使 Aurelia 观察数据属性的变化。 但它永远不会改变。在您的示例中, View 模型的数据属性保持相同的对象实例。唯一发生变化的是 branches 属性,该属性未在 objectPrinter 表达式中引用,因此它的更新不会导致该绑定(bind)重新评估。

这是创建对象打印机的另一种方法:

https://gist.run/?id=9eea8902521f4523ee2c

相关问题(忽略已接受的答案 - 它不适用于您的情况):

debug Aurelia ViewModel similar to ko.toJson

关于javascript - Aurelia 使用值转换器对打印值进行节流,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38326402/

相关文章:

javascript - 单击浏览器的后退和前进按钮时在页面选项卡之间导航

javascript - jquery 1 与 jquery 3 旧版浏览器

javascript - Aurelia 双向绑定(bind)无法正常工作

javascript - 如何将(调试与发布)args 传递给 Asp.Net MVC 中的 Aurelia 应用程序

javascript - 嵌套的 Aurelia 应用程序

javascript - 在 AngularJS App 中拆分 JS 文件

javascript - 如何在网页上显示 JavaScript 代码?

elasticsearch - 将ElasticSearch导入Aurelia

javascript - Aurelia 从自定义元素调用函数

javascript - 为什么我无法在电子中使用路径,fs导入全局