0

使用以下 ASP.NET 模型

public class User
  {
    public string Name { get; set; }
    public LEmail LEmail { get; set; }
  }
public class LEmail
  {
    public IList<CLabel> Labels;
    public IList<CEmail> Emails;
  }
public class CLabels
  {
    public IList<CLabel> Labels { get; set; }
  }
public class CLabel
  {
    public string Name { get; set; }
  }
public abstract class CEmail
  {
    public string SelectedLabel { get; set; }
    public string Name { get; set; }
  }

用虚拟数据填充它并作为User对象发送到适当的视图，我在视图中有以下剔除定义：

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "MyEditor" }))
{
  @Html.EditorFor(m => @Model.LEmail)
 <p>
    <input type="submit" value="Save" data-bind="enable: Emails().length > 0" />
    <a href="/">Cancel</a>
  </p>

  <p data-bind="visible: saveFailed" class="error">A problem occurred saving the data.</p>

  <div id="debug" style="clear: both">
    <hr />
    <h2>Debug:</h2>
    <div data-bind="text: ko.toJSON(viewModel)"></div>
  </div>
}

<script type="text/javascript">

  $(function() {
    ko.applyBindings(viewModel);

    $("#profileEditorForm").validate({
      submitHandler: function(form) {
    if (viewModel.save())
      window.location.href = "/";
    return false;
      }
    });
  });

  var viewModel = {

    Name: ko.observable("@Model.Name"),

    Labels: ko.observableArray(@Html.Json(Model.LEmail.Labels) || []),
    Emails: ko.observableArray(@Html.Json(Model.LEmail.Emails) || []),
    addEmail: function() {
      viewModel.Emails.push(@Html.Json(new CEmail()));
    },
    removeEmail: function(eml) {
      viewModel.Emails.remove(eml);
    },

    saveFailed: ko.observable(false),

    // Returns true if successful
    save: function() {
      var saveSuccess = false;
      viewModel.saveFailed(false);

      // Executed synchronously for simplicity
      jQuery.ajax({
    type: "POST",
    url: "@Url.Action("MyAction", "MyController")",
    data: ko.toJSON(viewModel),
    dataType: "json",
    contentType: "application/json",
    success: function(returnedData) {
      saveSuccess = returnedData.Success || false;
      viewModel.saveFailed(!saveSuccess);
    },
    async: false
      });       
      return saveSuccess;
    }
  };
</script>

最后，实际上应该处理可变长度列表的编辑器模板如下所示：

@model MyDomain.ViewModels.LEmail

<table>
    <tbody data-bind="template: { name: 'EmailsTemplate', foreach: Emails }" />
</table>

<button data-bind="click: addEmail">Add Email</button>

<script id="EmailsTemplate" type="text/html">
      <tr>
        <td>
      @* PROBLEM IS HERE!! Labels won't show (they will it this code taken out of template) *@
           <select data-bind="options: Labels"></select></td>
        <td>
          <input type="text" data-bind="value: Name, uniqueName: true" class="required" /></td>
        <td>
          <a href="#" data-bind="click: function() { viewModel.removeEmail(this); }">Delete</a></td>
      </tr>
</script>

本质上我

  1. 无法使其在EditorTemplatefor 组合框（或下拉列表）中工作。无论我做什么，它都不会附加到标签上。如果我将它带到其他地方的模板之外 - 它会按预期工作。

  2. 此外，根据选择填写电子邮件内的“SelectedValue” - 如何执行此操作。

  3. 选择所有内容后，（这必须很简单）如何将其全部发布回来而不会丢失值（如您所见，它是一个超级嵌套模型）。

非常感谢您！

4

1 回答 1

1

标签在您的视图模型上，而不是每封电子邮件。由于模板是在 Knockout foreach 绑定的上下文中呈现的，因此绑定上下文已更改为电子邮件。

这是我写你的观点的方式：

@model FiveW.ViewModels.LabeledEmail

<table>
    <tbody data-bind="foreach: Emails">
        <tr>
           <td>
              <select data-bind="options: $root.Labels, value: SelectedLabel"></select>
           </td>
           <td>
              <input type="text" data-bind="value: Name, uniqueName: true" class="required" />
           </td>
           <td>
              <a href="#" data-bind="click: function() { viewModel.removeEmail(this); }">Delete</a>
           </td>
      </tr>
    </tbody>
</table>

<button data-bind="click: addEmail">Add Labeled Email</button>

修复在 $root.Labels 中：我们需要告诉 Knockout 使用 $root（您的视图模型），因为标签实际上在您的视图模型上，而不是在单个电子邮件上。

另请注意，我没有使用命名模板。这是优选的。除非您在视图中的多个位置使用模板，否则您应该像我在上面所做的那样使用匿名的内联模板。

于 2013-03-06T23:21:22.183 回答