0

我也得到了一段关于 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;
    }

所以我担心的是我无法理解 KnockOut 相关代码。

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 = function () { addCountry 会在调用 DropDownModel() 函数时自动触发。如何自动调用函数？

KnockOut 如何填充下拉列表....它将如何理解如何填充下拉列表。

请详细指导我。谢谢

4

1 回答 1

0

什么是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特定绑定值的文档。

您还可以在 knockoutjs.com 上找到所有 knockout 的文档。

于 2012-08-29T18:49:19.593 回答