KnockOut如何用於填充組合

Question

我得到了一段關於KnockOut的代碼，使用jquery填充下拉列表。 我完全不熟悉KnockOut，所以我現在能夠理解它是如何工作的。

請告訴我KnockOut相關代碼的含義。 這裏是完整的代碼

<p> 
    Your country: 
    <asp:DropDownList ID="ddlCountries" runat="server" data-bind="options: countryModel.countries, optionsValue: 'CountryID', optionsText: 'CountryName', optionsCaption: 'Choose...'"> 
    </asp:DropDownList> 
</p> 
<input type="button" value="Add" data-bind="click: addCountry" /> 

<script type="text/javascript"> 
    function DropDownModel() { 
     var self = this; 
     self.countries = ko.observableArray(); 
     self.addCountry = function() { 
      $.ajax({ 
       type: "POST", 
       url: "DropDownSolution.aspx/GetCountries", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        self.countries(data.d); 
       } 
      }); 
     }; 
    } 
    var countryModel = new DropDownModel() 
    ko.applyBindings(countryModel); 
</script> 

    WebMethod] 
    public static List<Country> GetCountries() 
    { 
     List<Country> countries = new List<Country>(); 
     countries.Add(new Country { CountryID = "1", CountryName = "India" }); 
     countries.Add(new Country { CountryID = "2", CountryName = "Singapore" }); 
     countries.Add(new Country { CountryID = "3", CountryName = "Malaysia" }); 
     return countries; 
    } 

所以我的問題是我不能夠理解淘汰賽相關的代碼。

ko.applyBindings(countryModel); 

什麼是ko？

var self = this; 
self.countries = ko.observableArray(); 
self = this means what....so self hold which reference? 

self.countries = ko.observableArray(); 
what is ko and how ko comes? 
what is observableArray() & what is does? 

似乎self.addCountry =函數（）{ addCountry火災時自動 DropDownModel（）函數將被調用。一個函數如何自動調用？

KnockOut如何填充下拉菜單....它將如何理解如何填充下拉菜單。

請詳細指導我。謝謝

Answer 1

什麼是ko？

ko是全局淘汰對象。當您包含knockout.js腳本時會添加它。它就像jQuery的$變量。

看來self.addCountry = function（）{addCountry當DropDownModel（）函數被調用時會自動觸發。一個函數如何自動調用？

此功能不會自動調用。相反，它已通過以下方式連接到添加按鈕。

<input type="button" value="Add" data-bind="click: addCountry" /> 

即結合addCountry方法將click處理程序中的按鈕輸入的。

KnockOut如何填充下拉菜單....它將如何理解如何填充下拉菜單。

使用options綁定來填充下拉列表，如以下示例代碼段所示。

// Note that I removed some of the other attributes so that it is 
// easier to see the knockout only attributes. 
<asp:DropDownList data-bind="options: countryModel.countries, optionsValue: 'CountryID', optionsText: 'CountryName', optionsCaption: 'Choose...'"> 
</asp:DropDownList> 

您可以找到每個options特定綁定值here的文檔。

您還可以在knockoutjs.com找到所有淘汰賽的文檔。