爲什麼我的Knockout映射會殺死我的$ .change函數？

我有以下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>

來源

2012-03-01 PlTaylor

很難確切地說出問題所在，也許JSFiddle會有所幫助？ Outing在你綁定之前似乎沒有被填充，所以在你調用applyBindings，Outing（）的時候，OutingName是未定義的，你是否在控制檯中接收到任何js錯誤？

另外，敲除值綁定內部使用change事件來更新其可觀察值。因此在大多數情況下不需要使用Jquery更改事件。由於您已經將值綁定到OutingName，所以爲什麼不用您的outingDataViewModel替換您的change（）方法。

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

編輯

這裏是一個簡化版本的作品。我注意到你的updateOuting方法在訪問它的名字之前並沒有調用Outing observable。這通常會導致錯誤。我沒有包含信號R的東西，因爲我從來沒有用過它。

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

希望這有助於

來源

2012-03-01 17:54:20 madcapnmckay

您將可觀察絕對正確的....我用jQuery做的原因是，將要幾十多個文本框，這將導致保存在最終產品中。給他們所有的一類「數據」更容易，並且將它們全部綁定在一起。 – PlTaylor 2012-03-01 18:13:27

啊我明白所以你想通過使用一個Jquery選擇器來避免大量的訂閱。 – madcapnmckay 2012-03-01 20:18:17

對於self.hub.updateOuting，您需要$（'data'）調用才能正常工作。 – PlTaylor 2012-03-02 20:57:26

爲什麼我的Knockout映射會殺死我的$ .change函數？

回答

相關問題