Question

我一直致力于基于Knockoutjs创建'单页应用'的优秀mail example的单页应用。 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);

（同样，我在表格名称中错误拼写了workheetAddOrEdit对我的理智也无济于事）

单页应用提交表单标签上的绑定不起作用

1 个答案: