通过 AJAX 绑定到 DropDownList 的 Knockout.JS 可观察数组答案

【问题标题】：Knockout.JS Observable Array via AJAX bound to DropDownList通过 AJAX 绑定到 DropDownList 的 Knockout.JS 可观察数组
【发布时间】：2012-02-09 22:39:58
【问题描述】：

我正在尝试使用数据库中的一些下拉选项填充我的视图模型。我想跟踪所选对象，因为它具有我在其他地方的自定义绑定中使用的属性。

我使用“空白”值初始化 observable，以便在发生绑定并且我的自定义绑定有效时正确设置它。一旦服务器响应，我将数据变形为一个可观察的数组，下拉列表显示选项。

这是 JavaScript 代码：

ko.bindingHandlers.jq_fade = {
    init: function (element, valueAccessor) {
        // Initially set the element to be instantly visible/hidden depending on the value
        var value = valueAccessor();
        $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
    },
    update: function (element, valueAccessor) {
        // Whenever the value subsequently changes, slowly fade the element in or out
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
    }
};

function Firm(id, name, outsideCounsel) {
    this.name = name;
    this.id = id;
    this.outsideCounsel = outsideCounsel;
}

function RequestViewModel() {
    var self = this,
        ONE_DAY = 1000 * 60 * 60 * 24;


    self.firm = ko.observable(new Firm(-1, "", false));

    $.post(ajaxAddress + 'LoadFirms', function (data) {
        var mappedFirms = $.map(data.d, function (item) {
            return new Firm(item.OrganizationLookupID, item.OrganizationLookupName, item.IsExternalCounselFirm);
        });
        self.availableFirms(mappedFirms);
        self.firm(self.availableFirms()[0]);
    });
}


$(document).ready(function () {
    model = new RequestViewModel();
    ko.applyBindings(model);
});

这里是相关的 HTML

<span data-bind="jq_fade: firm().outsideCounsel">
    Outside Counsel
    <input type="text" id="outsideCounsel" data-bind="value: outsideCounsel" />
</span>

我希望仅当所选公司是外部法律顾问时才显示该 DIV。如果删除data-bind="jq_fade: firm().outsideCounsel 行，一切正常。如果我同步调用$.post()，它就可以工作。我认为 jq_fade 中的 init 函数有问题。

我收到的错误是：

未捕获的错误：无法解析绑定。消息：TypeError：无法调用未定义的方法“outsideCounsel”；绑定值：jq_fade:firm().outsideCounsel()

我明白 Knockout 告诉我什么，我只是不确定firm() 怎么可能是undefined，因为我设置了一个初始值。

【问题讨论】：

您确定服务器返回任何数据吗？如果不是，那么这条线 self.firm(self.availableFirms()[0]);可能会将 self.firm 重置为 undefined
您可能必须将“json”指定为 $.post 的最后一个参数。
是的，我确定服务器正在返回数据。指定“json”是对的。我正在页面中进一步执行此操作，但通过$.ajaxSetup() 调用。

标签： javascript jquery knockout.js

【解决方案1】：

如果您将availableFirms() 绑定到下拉列表，我假设您还将firm() 绑定到同一个列表，这样当从列表中选择另一个时，firm() 会自动更新并且您的所有绑定自动更新。

如果是这种情况，您根本不需要设置firm()，因为它将被设置为下拉列表中的第一个元素。

请参见此处的示例 3：

http://knockoutjs.com/documentation/options-binding.html

var viewModel = {
    availableCountries : ko.observableArray([
        new country("UK", 65000000),
        new country("USA", 320000000),
        new country("Sweden", 29000000)
    ]),
    selectedCountry : ko.observable() // Nothing selected by default
};

在没有专门设置firm()的情况下尝试上面的方法，看看它是否再次出错

【讨论】：