如何正确清除复杂对象的Aurelia绑定？

背景：我正在尝试使用Aurelia创建一个表单。我有一个person对象，我希望能够为其填写数据。如果用户知道有关此人家庭的一些识别信息，他们可以在输入中输入这些信息，并将显示一个选择框，允许用户从该家庭中为此特定表单选择个人。然后，表单将其知道的关于该个人的任何信息填写到输入字段中，允许用户在必要时覆盖任何信息。如果他们想选择另一个人，该表单还允许他们清除所选的人

大多数功能似乎都能按预期工作，但当我尝试允许用户清除所选人员时，我看到了一些我没有预料到的行为

---

我创造了一个新的世界。底部窗格的工作方式与我预期的一样，在用户获取数据、选择一个人并清除其选择后，他们将再次获得select元素。如果取消对输入元素的注释，您将看到用户现在必须单击两次清除操作，然后才能再次看到select元素为什么？

如何更新应用程序，以便用户只需清除该人员一次，然后再次显示“选择”框以允许用户进行其他选择

---

如果您有一个Aurelia应用程序，您应该能够通过将

app.html

替换为以下内容来复制该应用程序：

<template>
  <select value.bind="val2" if.bind="opts2 && !val2">
    <option repeat.for="opt of opts2" model.bind="opt">${opt.firstName}</option>
  </select>
  <div if.bind="!opts2 || val2">
    <span>${val2.firstName}</span>
    <button click.delegate="clearVal2()" if.bind="val2">Clear</button>
  </div>
  <button click.delegate="getOpts2()">Get</button>
  <div>${val2.blah}</div>
  <!--<input type="text" value.bind="val2.blah"/>-->
</template>

任何帮助都将不胜感激。谢谢

---

更新 如果我将输入放在一个自定义元素中并绑定到该元素，事情似乎会按预期进行。但是，我在表单中输入的值不在一个可以使用自定义元素的位置

---

如何在不需要自定义元素的情况下实现相同的功能？

老实说，我不知道为什么，但是如果在输入元素上添加if.bind=“val2”，它会清除值，然后选择按钮返回

<input type="text" if.bind="val2" value.bind="val2.blah"/>

---

希望这（稍微）有帮助

老实说，我不知道为什么，但是如果在输入元素上添加if.bind=“val2”，它会清除值，选择按钮会返回

<input type="text" if.bind="val2" value.bind="val2.blah"/>

---

希望这（稍微）有助于

如果您允许用户从列表中选择一个值或创建一个全新的条目，我倾向于将列表中选择的值与备份文本框的数据分开。每当

select

的值更改时，我都会将文本框后面的对象的值设置为

select

的值。在示例代码中，我选择这样做的方式是对

select

绑定的值使用

observable

装饰器

这里有一个例子：

app.html

${opt.firstName}
得到
名字：${person.firstName}
清晰选择
地址:

瓦尔
人

app.js

从“aurelia框架”导入{observable}；
导出类应用程序{
@可观测值=零；
person={}；
getOpts（）{
this.opts=[
无效的
{
废话：1，
名字：“foo”，
地址:{
第1行：“主街123号”
}
},
{
废话：2，
名字：“酒吧”，
地址:{
第1行：“456其他Wy。”
}
}
];
}
瓦尔德{
this.person=this.val；
控制台日志（“设置人员”）；
}
重置表单（）{
this.val=null；
控制台日志（“重置值”）；
}
toJSON（值）{
如果（！（值===false）&&！值）{
返回“”；
}
返回JSON.stringify（值）；
}
}

---

当我重置表单时，您可以看到一些有趣的事情正在发生。Aurelia正在创建绑定到

person

（即

person.address.line1

当我们设置

person=null

时，它不会创建

firstName

属性，b/c该属性在

person

停止错误之前不会被绑定。

如果您允许用户从列表中选择一个值或创建一个全新的条目，我倾向于用于分离列表中选定的值和备份文本框的数据。每当

选择

的值更改时，我会将支持文本框的对象的值设置为

选择

的值。我在示例代码中选择的方法是在值上使用

可观察

装饰器e

选择

已绑定到

这里有一个例子：

app.html

${opt.firstName}
得到
名字：${person.firstName}
清晰选择
地址:

瓦尔
人

app.js

从“aurelia框架”导入{observable}；
导出类应用程序{
@可观测值=零；
person={}；
getOpts（）{
this.opts=[
无效的
{
废话：1，
名字：“foo”，
地址:{
第1行：“主街123号”
}
},
{
废话：2，
名字：“酒吧”，
地址:{
第1行：“456其他Wy。”
}
}
];
}
瓦尔德{
this.person=this.val；
控制台日志（“设置人员”）；
}
重置表单（）{
this.val=null；
控制台日志（“重置值”）；
}
toJSON（值）{
如果（！（值===false）&&！值）{
返回“”；
}
返回JSON.stringify（值）；
}
}

当我重置表单时，您可以看到一些有趣的事情发生了。Aurelia正在创建绑定到

person

所需的属性（即

person.address.line1

，当我们设置

person=null

时）。但它不会创建

firstName

属性，b/c该属性不是

<template>
  <template with.bind="val.address">
    <input value.bind="line1" />
  </template>
</template>