Question

我的视图模型有一个唯一的属性currentProject，它本身有一个子属性，它是一个字符串数组。当我将所有内容绑定到视图时，所有数据都会正确填充，包括字符串数组。编辑数据时，不会更新字符串数组。

我是否需要做一些特定的事情才能使其成为双向绑定？我尝试了two-way命令，但没有任何区别。

我的视图模型如下所示：

export class Edit {
  currentProject;

  ...
}

CurrentProject设置为项目类的实例：

export class Project {
  id = '';
  name = '';
  modifiedDate = '';
  createdBy = '';
  students = [];
}

我的编辑视图如下所示：

<template>
  <section>
    <h1>Edit ${currentProject.name}</h1>
    <form role="form" submit.delegate="save()">
      <label for="name">Project Name</label>
      <input type="text" maxlenth="100" id="name" value.bind="currentProject.name" />

      <h2>Students</h2>
      <div repeat.for="student of currentProject.students">
        <label for="name${index}">Student ${$index + 1}</label>
        <input type="text" maxlenth="100" id="name${$index}" value.bind="student" />
      </div>
      <button class="btn">Add Student</button>

      <button type="submit" class="btn btn-primary">Update project</button>
    </form>
  </section>
</template>

非常感谢任何帮助。我怀疑我错过了一些细节。

谢谢，安德鲁

Answer 1

看起来这里的问题是由于字符串（原始类型）不变性，在输入字段中编辑的字符串与数组中的字符串之间没有引用，它只是两个不同的副本。

话虽如此，您可以采取两种方法使其正常运行。最好的一个是students的对象数组，可能是这样的：

[{name: 'Tomas Mann'}, {name: 'Alex Bloom'}]

然后repeat.for部分看起来像：

<div repeat.for="student of currentProject.students">
    <label for="name${index}">Student ${$index + 1}</label>
    <input type="text" maxlenth="100" id="name${$index}" value.bind="student.name" />
</div>

这种数据结构也更加灵活。例如，您可以添加其他学生信息，例如年龄，分数等。您甚至可以将students数组作为学生对象数组students: Student[]等。

如果您仍想使用简单字符串数组，那么您可以这样做：

<div repeat.for="student of currentProject.students">
    <label for="name${index}">Student ${$index + 1}</label>
    <input type="text" maxlenth="100" id="name${$index}" value.bind="$parent.currentProject.students[$index]" />
</div>

绑定视图模型与集合属性

1 个答案: