Question

我正在阅读这篇link中有关如何使用KnockoutJS填充下拉列表的文章。所以这是代码。

<asp:DropDownList ID="ddlCountries" runat="server" data-bind="options: 
     countryModel.countries, optionsValue: 'CountryID', optionsText: 'CountryName', 
    optionsCaption: 'Choose...'"></asp:DropDownList>

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

这是绑定UI的JS代码。

<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;
}

我的问题是当用户点击按钮将数据添加到下拉列表时，js代码如何理解哪个viewmodel函数“addCountry”要调用？

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

因为我可能在同一页面中有许多视图模型，并且所有视图模型都可能有一个名为addCountry()的函数。那么在那种情况下，KnockoutJS如何理解哪个viewmodel要调用哪个addCountry函数？

Answer 1

当您致电ko.applyBindings(viewModel)时，您可以指定所使用的视图模型。

如果您将第二个参数指定为DOM节点（ko.applyBindings(viewModel, someElement)），那么它将使用该元素作为绑定的根，以便视图模型生效。

因此，如何应用绑定确定哪个视图模型用于元素。您不应多次将绑定应用于相同的元素。

需要一个指导来理解几行淘汰赛js代码

1 个答案: