在 Aurelia 视图中使用文字 JavaScript 值
Using literal JavaScript values in an Aurelia view
我正在尝试使用 "if" 模板控制器使我的组件可隐藏。问题是即使我在其中输入 false 也是可见的:
<template if.bind="${false}">
zzzzzzzz
</template>
if.bind="false" 并且没有绑定的两种情况都会带来相同的结果。难道我做错了什么?如果没有,能否请您指出 aurelia 代码调试,这可能会帮助我获得线索?
此致,尤金。
插值
使用 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 />
但是请注意,没有语法可说 "this is a variable." 事实上,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>
我正在尝试使用 "if" 模板控制器使我的组件可隐藏。问题是即使我在其中输入 false 也是可见的:
<template if.bind="${false}">
zzzzzzzz
</template>
if.bind="false" 并且没有绑定的两种情况都会带来相同的结果。难道我做错了什么?如果没有,能否请您指出 aurelia 代码调试,这可能会帮助我获得线索?
此致,尤金。
插值
使用 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 />
但是请注意,没有语法可说 "this is a variable." 事实上,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>