我的绑定有什么问题？

在我们开始之前，我想指出，这是使用html/js和knockout的第零天，所以我可能会误解它是如何一起工作的。我的绑定有什么问题？

我做了一个简单的测试webapi，所以我可以与knockout握手。这一切都工作到目前为止，但我似乎无法工作的绑定<span data-bind="text:currentMember().name"></span>。

页

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test page</title> 
    <script src="Scripts/knockout-2.2.1.js"></script> 
    <script src="Scripts/jquery-2.0.0.js"></script> 
    <script src="Scripts/ViewModels/indexViewModel.js" defer="defer"></script> 
</head> 
<body> 
    <div id="Content"> 
     <section> 
      <p>Member Number: </p> <input id="memberNumber" type="text" /> 
      <p>Pin: </p> <input id="memberPin" type="text" /> 
      <input type="submit" value="Get" data-bind="click: getMember" /> 
     </section> 
     <span data-bind="text:currentMember().name"></span> 
    </div> 
</body> 
</html>

视图模型

function IndexViewModel() { 
var self = this; 

self.currentMember = ko.observable(); 

self.getMember = function() { 

    var memberNumber = $('#memberId').val(); 
    var memberPin = $('#memberPin').val(); 

    if (memberNumber == '' || memberPin == '') { 
     memberNumber = '372-001100-134'; 
     memberPin = '123456'; 
    } 

    $.ajax({ 
     dataType: "json", 
     url: "http://localhost:25979/api/members/GetMemberByNumberAndPin", 
     data: { 
      memberNumber: memberNumber, 
      pin: memberPin 
     }, 
     success: function (serviceResponse) { 
      if (!serviceResponse.hasAlerts) { 
       self.currentMember(serviceResponse.body); 
       alert(self.currentMember().name); 
      } 
     } 
    }); 
}; 
} 

ko.applyBindings(new IndexViewModel());

编辑：我已经改变了代码，现在警报确实工作，但HTML结合仍然没有更新。

来源

2013-04-29 McDonnellDean

self.currentMember（serviceResponse.body）; – Roar 2013-04-29 13:02:59

其他 'self.currentMember（serviceResponse.body）;'您可以使用[value binding]（http://knockoutjs.com/documentation/value-binding.html）作为输入memberNumber，memberNumber来简化您的getMember函数。 – nemesv 2013-04-29 13:07:47

您已声明currentMember作为可观察值。要设置observable的值，您需要将其作为函数调用。所以请尝试self.currentMember(serviceResponse.body)。如果您像这样做self.currentMember = seviceResponse.body，您将基本上将currentMember变量重新定义为常规的不可观察变量。

查看documentation了解更多解释。

来源

2013-04-29 13:03:46 NilsH

我已更改我的代码以反映此情况。警报现在按预期工作，但跨度上的数据绑定不起作用。 – McDonnellDean 2013-04-29 13:14:02

@McDonnellDean你需要用一个空对象'self.currentMember = ko.observable（{}）;'初始化你的observable，因为默认情况下它是未定义的，当你绑定'text：currentMember（）.name'被解析时，它会尝试在undefinied上调用'name'会抛出一个错误。您可以在浏览器的JavaScript控制台中看到错误。 – nemesv 2013-04-29 13:21:31

@nemesv这样做！干杯，我是JS的一名全新的淘汰赛，并认为它可能是非常愚蠢的事情！ – McDonnellDean 2013-04-29 13:24:13

我的绑定有什么问题？

回答

相关问题