Question

假设我有以下仅html元素：

<template bindable='value: Math.random()'>
    ${value}
</template>
<!-- In another component {Main} -->
<template>
    <require from='./that-element'></require>
    <that-element></that-element>
</template>

结果是主要组件中的空字符串。问题是如何为仅html元素定义默认值？

编辑：如果2个绑定需要具有相同的唯一默认值，则元素的默认值将不起作用。我可以让它自己独一无二，但我必须手动完成它。正在寻找像Math.random()

这样的东西

Answer 1

bindable标记上<template>属性的内容被视为comma-separated list of strings。因此，您无法在那里设置默认值。

我可以想到两种方法：

在父viewmodel类中设置默认值并使用显式绑定。考虑到上述情况，这将适合您。

<that-element value.bind="someVarFromParent"></that-element>

在一些非常简单的情况下，当默认值应该是静态字符串时，您可以在插值中使用JavaScript表达式。

${value || 'default value'}

Gist演示：https://gist.run/?id=f0698d5b0066c3674c29c40d850217dc

Answer 2

把我的2美分放在这里...我认为Marton用html唯一解决方案将其钉在了头上。我通常使用value.bind方法，因为我的视图通常总是有vm。因此，为了简化JayDi的响应（这是一个有效的响应），我为您创建了一个GistRun。

基本上，您将创建一个custom-elem html文件和一个custom-elem js文件。在html文件中，你会有这样的东西：

<template>
  <h1>${value}</h1>
</template>

在js文件中，你有类似的东西：

import {bindable} from "aurelia-framework";

export class CustomElem {
  @bindable value = "default value";
}

最后，您只需要在主要父文件中输入它，如下所示：

<template>
  <require from="./custom-elem"></require>

  <custom-elem></custom-elem>
  <custom-elem value.bind="'myVal'"></custom-elem>
</template>

我刚添加了自定义元素的默认值。如果您愿意，可以将其保留为未定义。此外，您可以根据需要添加任意数量的属性。在我看来，这是解决这个问题的最简单方法，除非你的情况允许你使用html only方法。

此外，在这种情况下，我使用的是＆＃34; myVal＆＃34;的字符串。如果您想使用父vm中的变量，则只需取消单引号并使用该变量名称。

这里是正在运行的Gist，这样你就可以愚弄它： https://gist.run/?id=2eb14ecd2b0b859fd5d1a33b5ee229bd

Answer 3

您可以在html-only元素中使用||语句作为默认值：

<template bindable="param1, param2, param3">
  <h1>${param1 || 'default 1'}</h1>
  <h2>${param2 || 'default 2'}</h2>
  <h3>${param3 || 'default 3'}</h3>
</template>

如何在Aurelia HTML only元素中设置可绑定属性的默认值

3 个答案: