3

我有这个例子的功能要求：

  • “公民身份”由 3 个单选按钮组成，即“南非公民”、“非南非人，有工作许可”和“非南非人，没有工作许可”。

  • “工作许可证号码”是一个自由文本字段，限制为 15 个字符，在“公民”字段中选择“非南非人，有工作许可证”时激活

我想为诸如“工作许可证号”之类的字段编辑器创建某种通用容器，它可以根据其他模型属性启用或禁用其包含的编辑器，例如本例中的“公民身份”。这在第一次检索时很容易实现并渲染视图模型。

但是，当用户更改“公民身份”的值时，事情会变得复杂。只有 UI 字段发生了变化，没有模型属性，但是决定是否启用“工作许可证号”的容器依赖于模型属性。

我只看到两个解决方案：

  1. 使用客户端（可能是 JavaScript）视图模型，从服务器端视图模型构建，可能是 Knockout.js 场景。然后绕过正常的表单提交，一次性提交整个客户端模型。

  2. 当用户更改“Citizenship”值时，使用 ajax 调用更新服务器端模型，并更新依赖于“Citizenship”值的所有视图部分。这使事情变得复杂，因为我必须有一个“工作”和一个“承诺”模型服务器端。持久化小更改的工作模型，例如仅“公民身份”，然后当用户单击保存时，将所有更改移动到“已提交”模型并持久化到数据存储中。

对于那些理解我的意思的人，我可以使用哪些其他方式来实现这一点，或者我该如何改进我上面概述的技术？

4

1 回答 1

0

我认为这种情况非常适合使用淘汰赛的客户端解决方案，正如您在第一个建议的解决方案中提到的那样。Knockout 使得以声明方式进行这种客户端 UI 操作变得非常容易。用户完成表单后，您只需将客户端视图模型对象序列化为 JSON 并将其 POST 到您的服务层。

您提出的第二个解决方案的吸引力要小得多。它的缺点包括：

  1. 它需要服务器回发只是为了更新 UI，这是一种不太理想的用户体验
  2. 您的服务器域模型现在必须有一个工作且已提交的模型，这增加了复杂性

使用 MVVM 模式通过敲除和客户端 javascript 视图模型实现这一点的代码非常简单：

<div data-bind = "text: name"></div>
<input type="radio" name="citizenship" value="yes" data-bind="checked: citizenship">South African Citizen<br/>
<input type="radio" name="citizenship" value="nowithoutworkpermit" data-bind="checked: citizenship">Non South African, no work permit<br />
<input type="radio" name="citizenship" value="nowithworkpermit" data-bind="checked:     citizenship">Non South African, with work permit<br />
<div id="workpermit" data-bind="visible: citizenship() === 'nowithworkpermit'">
    <input type="text" name="workpermitinumber" />Work Permit number
</div>

<script src="/Scripts/knockout-2.2.0.js" ></script>
<script>
    var MyApp = MyApp || {};
    MyApp.ViewModel = {
        citizenship: ko.observable(""),
        name: ko.observable("John")
    };
    ko.applyBindings(MyApp.ViewModel);
</script>

在此示例中，我在 MyApp.ViewModel 中创建了一个视图模型。该模型有两个属性：姓名和公民身份。我已经将“citizenship”属性绑定到单选按钮的“checked”属性，以及显示工作许可证号文本框的“visible”属性。

当用户选中一个单选按钮时，敲除将更新视图模型的“citizenship”属性。视图模型属性中的这种更改将反过来通过淘汰“可见性”绑定更新工作许可 div 的可见性 css 属性。当用户准备好提交表单时，您只需将 MyApp.ViewModel 序列化为 JSON 并通过网络发送。

淘汰赛的文档非常出色（请参见此处），我认为它非常适合您要完成的工作。

于 2012-12-15T03:05:43.480 回答