选择通过 ajax 和取消映射问题获得的选项答案

【问题标题】：Select options obtained via ajax and unmap issue选择通过 ajax 和取消映射问题获得的选项
【发布时间】：2017-08-16 17:27:14
【问题描述】：

我没有看到任何示例将使用选择元素的表单与通过 ajax 获得的选项链接起来。我想通过 ajax 初始化一个视图模型属性，以便在我的视图中填充一些选择列表，并从我的模型数据中对选定的 id 进行数据链接。在执行编译视图模型的 .unmap() 时我不需要这些数组，因为我不想在更新模型时将大列表发送回服务器。所以，假设我有 ProjectID、ProjectDescription、ProjectTypeID、ProjectPriorityID 的数据。在我的视图模型中，我需要通过 ajax 获取 ProjectTypes 和 ProjectPriorities 列表并在我的视图中使用它们，以便我可以从列表中选择值。在执行 .unmap() 将其发送回服务器时，如果不将列表作为数据的一部分，我不确定如何实现这一点。

如果我的视图模型中存在“ProjectTypes”或“ProjectPriorites”的属性，则在调用 .unmap() 时它们总是会成为数据的一部分。

谢谢

【问题讨论】：

我的回复对你有用吗？如果是这样，您可以将其标记为已接受吗？谢谢...

标签： forms select jsviews

【解决方案1】：

有不同的替代方法。一种是拥有一个模型，该模型既包括“辅助数据”（例如所有 ProjectTypes），它不会动态更改，也包括可以根据用户输入更新的“主要数据”。在这种情况下，当您使用 unmap() 从 VM 层次结构返回纯 JSON 数据时，您可以“修剪”它并仅将相关的“主要”部分发送回服务器。

另一种方法是将主数据和辅助数据分开 - 因此模型只是“主”数据，而辅助数据是分开的 - 例如，作为帮助器传入：

// Instantiate View Models
var appVm = $.views.viewModels.MyModel.map(modelData);
var typesVm = $.views.viewModels.MyTypes.map(typeData);

$.templates("#appTemplate").link("#page", appVm, {types: typesVm});

<select data-link="typeId()"><
  {^{for ~types.projectTypes()}}
    <option value="{{:id()}}">{{:label()}}</option>
  {{/for}}
</select>

你也可以选择不编译辅助数据的视图模型，如果它基本上是“静态的”，那么：

$.templates("#appTemplate").link("#page", appVm, {types: typesData});

<select data-link="typeId()"><
  {^{for ~types.projectTypes}}
    <option value="{{:id}}">{{:label}}</option>
  {{/for}}
</select>

另一种方法是仅将实际更改的任何数据值或数组发送回服务器，例如通过使用 CRUD/REST Web 服务方法服务器更新。在这种情况下，您将需要有代码来区分数据，或者使用observe 或observeAll 来响应增量更改...

【讨论】：