在Aurelia视图中使用文字JavaScript值

Question

我正在尝试使用"if"模板控制器使我的组件可以隐藏.问题是,即使我在其中放入虚假,它也是可见的:

<template if.bind="${false}">
zzzzzzzz
</template>

if.bind ="false",两个没有绑定的情况都会带来相同的结果.难道我做错了什么？如果没有,请你指点aurelia代码调试,这可能有助于我得到一个线索？

最好的问候,尤金.

Answer 1

插值

使用if.bind信号Aurelia尝试评估表达式.因此,您不需要使用插值语法.您只想在将数据注入非Aurelia管理的属性时使用插值.典型的用例是将文本注入任意元素.

<p>Welcome to my website, you are the ${visitorCount} visitor!</p>

您也可以在其他您可能会随意注入数据的地方使用插值,包括html属性.

<input placeholder="${currentRecordType}" />

插值是单向绑定.在这里阅读更多内容:http://aurelia.io/docs.html#string-interpolation

捆绑

现在,绑定语法用于挂钩在Aurelia中启用的行为.开箱即用,这包括一些模板逻辑,一些属性行为和一些其他自定义的东西.

每个属性都旨在检查它的使用位置以及如何驱动它.例如,以下绑定将是单向的,因为它不接受输入,仅作为单向变量绑定有意义.

<div if.bind="sectionEnabled"></div>

但是,以下绑定将是双向的,因为它接受输入,因此通常会以双向方式运行.

<input value.bind="firstName />

但请注意,没有语法可以说"这是一个变量".实际上,Aurelia假设你想传入一个变量.如果你不这样做,例如在第二种情况下,你不需要Aurelia,你只需写:

<input value="firstName" />

您可以在此处阅读有关绑定语法的更多信息:http://aurelia.io/docs.html#databinding

答案

在您的情况下,您通过尝试绑定文字值来采取错误的方法.Aurelia正在寻找一个名为${false}/ 的变量,false而且很可能找不到它.您需要在viewModel中创建一个变量来绑定并指示您的视图绑定到它:

视图模型

class viewModel {
  ...
  constructor() {
    this.showTemplate = true;
  }
}

视图

<template>
  <div if.bind="showTemplate">
    ... 
  </div>
</template>