可編輯解析爲未定義的混合KnockOutJS和純Javascript使用

Question

我嘗試使用KnockOut JS（ko.plus準確地）綁定選項創建下拉菜單。事情按預期運行，直到我把我的解決方案與這個jsfiddle混合在一起：http://jsfiddle.net/jnuc6y05/爲了在列表中放置一個默認選項。問題就出在「這裏」（請參閱​​代碼）從哪裏獲得 錯誤信息

"TypeError: this.fieldStreetApallou is not a function"

正如我說我沒有問題，我認爲混合純JavaScript和KO造成的情況。我試圖解開可編輯而沒有運氣，因爲它解決了未定義。即使ko.toJS也沒有做到這一點（再次未定義）。

我對KO沒有任何認真的經驗，並且還有Javascript，任何幫助都將不勝感激。

PS：減少代碼提供

/////// HTML 

    <input data-bind="value: fieldStreetApallou, enable: fieldStreetApallou.isEditing" /> 
     <a href="#" data-bind="visible: !fieldStreetApallou.isEditing(), click: fieldStreetApallou.beginEdit">Rename</a> 
    <div data-bind="visible: fieldStreetApallou.isEditing"> 
     <a href="#" data-bind="click: function() { fieldStreetApallou.endEdit(); postStreetFieldToServerForApallou(); }"> Confirm</a> 
     <a href="#" data-bind="click: fieldStreetApallou.cancelEdit"> Cancel</a> 
    </div> 

    /////// Javascript 
    <script type="text/javascript"> 

     ko.observableArray.fn.find = function(prop, data) { 
      var valueToMatch = data[prop]; 
      return ko.utils.arrayFirst(this(), function(item) { 
       return item[prop] === valueToMatch; 
      }); 
     }; 

     var availableCompanies = [{ 
      offset: 1, 
      name: "Company1" 
     }, { 
      offset: 2, 
      name: "Company2" 
     } 
     // ...more pairs here 
     ]; 


     //Default pairs for the drop-down menus 
     var selectedCompanyApallou = { 
      offset: 1, 
      name: "Company1" 
     }; 

     var ViewModel = function(availableCompanies, selectedCompanyApallou) { 
      this.availableCompaniesApallou = ko.observableArray(availableCompanies); 
      this.selectedCompanyApallou = ko.observable(this.availableCompaniesApallou.find("offset", selectedCompanyApallou)); 

      this.fieldStreetApallou = ko.editable("Initial value"); 

      postStreetFieldToServerForApallou = function() { 
       $.ajax({ 
        type: "PUT", 
        url: "http://www.san-soft.com/goandwin/addresses/" + 15, 
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        data: "Address_id=15&Street=" + this.fieldStreetApallou() //<---- HERE! 
       }).done(function(data) { 
        alert("Record Updated Successfully " + data.status); 
       }).fail(function(err) { 
        alert("Error Occured, Please Reload the Page and Try Again " + err.status); 
       }); 
      }; 

     }; 

     ko.applyBindings(new ViewModel(availableCompanies, selectedCompanyApallou)); 

    </script> 

Answer 1

我想你鏈接到錯誤的jsfiddle。

看起來像this是不是你所期待的當按鈕點擊調用postStreetFieldToServerForApallou時。 JavaScript中的this是基於誰調用的函數。

要解決它在這種情況下，我喜歡在視圖模型的頂部設置var self = this;所以self總是指向視圖模型，然後我self取代的this所有實例。這真的只在你的HERE系列上需要，但是它簡化了整個使用self。

固定視圖模型代碼：

var ViewModel = function(availableCompanies, selectedCompanyApallou) { 
    var self = this; 
    self.availableCompaniesApallou = ko.observableArray(availableCompanies); 
    self.selectedCompanyApallou = ko.observable(self.availableCompaniesApallou.find("offset", selectedCompanyApallou)); 

    self.fieldStreetApallou = ko.editable("Initial value"); 

    postStreetFieldToServerForApallou = function() { 
     $.ajax({ 
      type: "PUT", 
      url: "http://www.san-soft.com/goandwin/addresses/" + 15, 
      contentType: "application/x-www-form-urlencoded; charset=utf-8", 
      data: "Address_id=15&Street=" + self.fieldStreetApallou() //<---- HERE! 
     }).done(function(data) { 
      alert("Record Updated Successfully " + data.status); 
     }).fail(function(err) { 
      alert("Error Occured, Please Reload the Page and Try Again " + err.status); 
     }); 
    }; 
};