Почему мой нокаут-картография убивает мою функцию $ .change?

Question

У меня есть следующий Javascript и HTML-код, который отлично работает в приложении MVC4.

@model string 
<script src="@this.Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"> </script> 
<script src="@this.Url.Content("~/Scripts/jquery.signalR.js")" type="text/javascript"> </script> 
<script src="@this.Url.Content("~/Scripts/knockout.js")" type="text/javascript"> </script> 
<script src="@this.Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"> </script> 
<script type="text/javascript" src="/signalr/hubs"> </script> 
<script type="text/javascript"> 
    $(function() { 
     function outingDataViewModel() { 
      var self = this; 
      self.hub = $.connection.outings; 
      self.ID = ko.observable(); 
      self.OutingNumber = ko.observable(); 
      self.OutingName = ko.observable(); 
      //Initializes the view model 
      self.init = function() { 
       self.hub.getOuting('@this.Model'); 
      }; 
      self.hub.updateOuting = function (data) {      
       self.ID(data.ID); 
       self.OutingName(data.OutingName); 
       self.OutingNumber(data.OutingNumber); 
      }; 

      self.updateOuting = function() { 
       var outing = { "ID": self.ID(), "OutingNumber": self.OutingNumber(), "OutingName": self.OutingName() }; 
       self.hub.saveOuting(outing); 
      }; 
     } 

     var vm = new outingDataViewModel(); 
     ko.applyBindings(vm); 
     // Start the connection 
     $.connection.hub.start(function() { vm.init(); }); 
     $('.data').change(function() { vm.updateOuting();}); 
    }); 
</script> 

<div id="OutingSummary"> 
    <div data-bind="text:OutingNumber"></div> 
    <input data-bind="value:OutingName" class="data"/> 
</div> 

Но когда я пытаюсь реализовать отображение, выполнив следующие действия моего $ изменить (функция() {vm.updateOuting();}) ('данных.'). никогда не вызывается. Инструменты для разработчиков Chrome, похоже, не попадают ни в какие ошибки, и я в недоумении. Информация привязывается к html, только когда я выхожу из текстового поля, ничего не срабатывает. (Та же ссылка на сценарий, что и раньше)

$(function() { 
      function outingDataViewModel() { 
       var self = this; 
       self.hub = $.connection.outings; 
       self.Outing = ko.observable(); 
       //Initializes the view model 
       self.init = function() { 
        self.hub.getOuting('@this.Model'); 
       }; 
       self.hub.updateOuting = function (data) { 
        self.Outing(ko.mapping.fromJS(data)); 
       }; 

       self.updateOuting = function() { 
        var outing = { "ID": self.Outing.ID(), "OutingNumber": self.Outing.OutingNumber(), "OutingName": self.Outing.OutingName() }; 
        self.hub.saveOuting(outing); 
       }; 
      } 

      var vm = new outingDataViewModel(); 
      ko.applyBindings(vm); 
      // Start the connection 
      $.connection.hub.start(function() { vm.init(); }); 
      $('.data').change(function() { vm.updateOuting();}); 
     }); 
    </script> 

    <div data-bind="with:Outing" id="OutingSummary"> 
     <div data-bind="text:OutingNumber"></div> 
     <input data-bind="value:OutingName" class="data"/> 
    </div> 

Answer 1

Трудно сказать, в чем проблема, может быть, JSFiddle поможет? Как правило, вы не заселяетесь, пока вы не свяжетесь так, как только вы назовете applyBindings, Outing(). OutingName не определено, получаете ли вы какие-либо ошибки js в консоли?

Как в стороне, привязка значения нокаута внутренне использует событие изменения для обновления его наблюдаемого. Поэтому в большинстве случаев нет необходимости использовать события изменения JQuery. Поскольку вы уже привязываете значение к OutingName, почему бы не заменить ваш метод change() этим внутри вашего outingDataViewModel.

self.Outing().OutingName.subscribe(function() { 
    self.updateOuting(); 
}); 

EDIT

Вот упрощенная версия, которая работает. Я заметил, что ваш метод updateOuting не вызывал Outing observable перед доступом к его имени. Это может привести к ошибке. Я не включил сигнал R, поскольку я никогда не использовал его раньше.

http://jsfiddle.net/madcapnmckay/gDu94/

Надеется, что это помогает,