0

在我的模型中，我有一个带有可观察元素的对象数组。我订阅了这些元素之一（下拉列表），以便填写下一个下拉列表（级联下拉列表）。我现在需要在这些下拉列表中获取所选值的描述。我将如何从下拉列表中提取该值？如果可能，我试图避免对服务器运行查询。

过去我做过self.deptName($('#AssignedDepartment option:selected').text());，但现在这个下拉列表并不是唯一的。我可以有很多选择。我uniqueName: true在每个领域都使用。在订阅中，我如何确定更改了哪个下拉菜单？

这是我的订阅的样子：

    // Build the hours types when the request type is selected
    self.RequestType.subscribe(function (newValue) {
        FindRequestType(newValue, function (record) {
            // Do stuff
        });
    });

这是下拉列表的 HTML：

<select class="required span12" data-bind="leaveTypeDropDown: RequestType, uniqueName: true"></select>

这是绑定处理程序：

ko.bindingHandlers.leaveTypeDropDown = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // If we don't have the leave request dropdown data, pull it.
        if (jsonRequestType === "") {
            $.ajax({
                'async': false,
                'url': '/api/payroll/LeaveRequestTypes/',
                'dataType': 'text json',
                'type': 'GET',
                'success': function (json) {
                    jsonRequestType = json;
                    jsonRequestTypeRecieved = true;
                }
            });
        }

        // Fill the drop down list.
        LoadRequestType(element);

        // register event handler where bound observable will be changed
        ko.utils.registerEventHandler(element, 'change', function () {
            var observable = valueAccessor();
            observable(element.value);
        });

        // Select the value from the previous record if there is one.
        if (selectedRequestType !== null) {
            element.value = selectedRequestType;
            ko.utils.triggerEvent(element, 'change');
            selectedRequestType = null;
        }
    }
};

更新1：由于存在混乱。如果我在下拉列表中选择带有“假期”文本的值“VAC”。如何将文本“假期”放入我的模型中？

更新 2：这是一个 jsFiddle，上面列出了我的（大部分）工作代码。http://jsfiddle.net/MikeWills/cykuqxto/6/出于某种原因，加载时我的下拉菜单不起作用，但再添加一天，您会看到我的下拉菜单。

4

1 回答 1

1

我们必须稍微清理一下您的方法。首先，让我们在您的模型上制作我们需要的所有可观察对象，并使用您的 ajax 调用填充第一个下拉选项：

var viewModel = {
    firstDropDownOptions: ko.observableArray(),
    firstDropDownChoice: ko.observable()
};

$.ajax(...).done(function (data) {
    // process data and assign
    // for the binding below to work, processedData has to have items like this:
    // {textProperty: 'some text', otherProperty: ...}
    // as you said in a comment, you have option groups so I'm going to assume
    // processedData looks like this overall:
    // [{group: 'one', options: [{text: 'Vacation', value: 'VAC'}, ...]}, ...]
    viewModel.firstDropDownOptions(processedData);
});

然后让我们使用选项绑定将该可观察对象绑定到您的下拉列表： 

<select data-bind="foreach: firstDropDownOptions, value: firstDropDownChoice">
    <optgroup data-bind="attr: {label: label}, foreach: options">
        <option data-bind="text: text, option: $data"></option>
    </optgroup>
</select>

这是使用来自KnockoutJS 的自定义绑定 - select 的绑定值与 optgroup 和 javascript 对象：

ko.bindingHandlers.option = {
    update: function(element, valueAccessor) {
       var value = ko.utils.unwrapObservable(valueAccessor());
       ko.selectExtensions.writeValue(element, value); // note this is magic
    }        
};

最后，让我们订阅监控第一个下拉列表变化的 observable：

viewModel.firstDropDownChoice.subscribe(function (newChoice) {
    // in this function, newChoice is the option selected in the first drop down,
    // but not just the value, the whole object, so you can do:
    console.log(newChoice, newChoice.text);
});
于 2014-09-16T22:31:43.033 回答