2015-09-04 53 views
0

我想实现一个knockoutjs窗体到我的Django站点。我新的淘汰赛,所以遵循一个例子,但由于某种原因,当我提交页面刷新没有错误,但没有提交到api。敲除窗体Django的其余框架

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> 

<form data-bind="submit: mySubmit"> 
    <input data-bind="value: firstname" /> 
    <input data-bind="value: lastname" /> 
    <button type="submit">Go</button> 
</form> 

<script type="text/javascript"> 
    var viewModel = { 
     mySubmit : function(formElement) { 
      var formData = { 
       'firstname'    : $('#firstname').val(), 
       'lastname'    : $('#lastname').val() 
      }; 

      $.ajax({ 
       url: "127.0.0.1:8000/api/test", 
       type: "POST", 
       data: formData, 
       datatype: "json", 
       processData:false, 
       contentType: "application/json; charset=utf-8", 
       success: function (result){ 
        alert(result); 
       } 
      }); 
     } 
    }; 
    ko.applyBindings(viewModel); 
</script> 
+0

现在我正在'未捕获的ReferenceError:无法处理绑定 “值:函数(){返回姓名}” 消息:姓名是未定义“ – Mantis

回答

1

你还没有在viewModel中声明observable。所以考虑宣布让事情顺利进行。

视图模型:

var viewModel = { 
    firstname:ko.observable(),lastname:ko.observable(), 
     mySubmit : function(formElement) { 
      var formData = { 
       'firstname' : viewModel.firstname() , 
       'lastname' : viewModel.lastname() 
      }; 

      $.ajax({ 
       url: '/echo/json/', //mocking ajax request 
       type: "POST", 
       data: formData, 
       contentType: "application/json; charset=utf-8", 
       success: function (result){ 
        alert("success"); 
       } 
      }); 
     } 
    }; 

ko.applyBindings(viewModel); 

工作样品here