单页应用程序提交表单标记上的绑定不起作用

Question

我一直在开发一个基于 Knockoutjs 的优秀 邮件示例 的单页应用程序创建“单页应用程序”。 Steve Sanderson 的示例使用驻留在示例中所有表单页面中的 jQuery 模板。

我正在尝试将 .ascx 合并到此场景中：用户单击列表中的一行，通过 .load-ing .ascx 来显示记录。提交时，表单数据成功发送到控制器，但返回不会命中 .ajax 调用的成功、失败甚至完成的方法。相反，浏览器会提醒用户下载响应。

我一直在稳步研究这个问题，并发现了一些可能会带来更多启发的附加信息。提交按钮不会运行到 viewModel.updateWorksheet 方法。它将表单直接提交给控制器。我对表单标签上的knockoutjs data-bind="submit: provViewModel.updateWorksheet" 属性做错了什么吗？

控制器通过以下方法接收 json：

public JsonResult WorksheetUpdateAjax( WorksheetDTO worksheetDTO)
{
  //(some code here)

  try
  {
    _wksRepos.Update();
  }
  catch (Exception e)
  {
    return Json(e.Message, JsonRequestBehavior.AllowGet);
  }
  return Json("Successfully updated", JsonRequestBehavior.AllowGet);
}

表单标签和提交按钮如下所示：

<form name="wokrsheetAddOrEdit" 
      class="ui-widget" 
      data-bind="submit: viewModel.updateWorksheet" action="/WorksheetUpdateAjax">
    <br /><br />
    (html here)<br /><br />
    <button type="submit">Update</button>
    <br />
</form>

这是 viewModel 声明（省略了很多）

viewModel = {
    updateWorksheet: function () {
        $.validator.unobtrusive.parse("#worksheetForm");
        if (!$('#worksheetForm').valid()) {
            return false;
        }
        var worksheetJson = ko.toJSON({
            worksheetDTO: provViewModel.selectedWorksheet
        });

        //ko.utils.postJson($("form").wokrsheetAddOrEdit, worksheetJson); -- tried this but does the same
        $.ajax({
            url: $("form").worksheetAddOrEdit,
            type: "POST",
            data: worksheetJson,
            dataType: "json",
            success: function (data) {
                // here I'd like to return to the app
            },
            failure: function (data) {
                alert(data);
                return false;
            }
        });
    }
}

Answer 1

我找到了答案...

由于使用了 .load() ，因此必须重置 ko.applyBindings ：（

viewModel.selectedWorksheet = ko.dependentObservable(function () {
  var worksheetIdToFind = this.selectedWorksheetId();
  var worksheetToReturn = ko.utils.arrayFirst(viewModel.currentProvWorksheets(), function (item) { return item.Id == worksheetIdToFind; });
  if (worksheetIdToFind) {
    $("#worksheetForm").load("/Provider/GetWorksheetForm/" + worksheetIdToFind,
        function () {
            var theForm = document.forms.worksheetAddOrEdit;
            ko.applyBindingsToNode(theForm, null, provViewModel);
        });
}
return worksheetToReturn;  }, viewModel);

而且我在表单名称中拼写错误的 worksheetAddOrEdit 也对我的理智没有多大帮助）