带有optionsValue和value的knockout.js [英] knockout.js with optionsValue and value

问题描述

有没有办法将 value 绑定到对象，但让 optionsValue 成为对象的一个​​属性.到目前为止，如果我同时指定两者，则选择的 optionsValue 属性将填充 value 绑定.我想在 observable 中保持对象完整，但在选择列表值中指定要设置的值.这样，表单提交将发送我选择的 optionsValue.

Is there a way to keep the value binding to the object, but have the optionsValue be a property on the object. As of now if I specify both, the optionsValue property that is selected will populate the value binding. Id like to keep the object intact in the observable, but specify what value to be set in the select list value. This way a form submit will send the optionsValue I chose.

@Html.DropDownListFor(q => q.DivisionId, new SelectList(Enumerable.Empty<string>()), new { data_bind="options: divisions, optionsText: 'Name', optionsValue: 'Id', value: division, optionsCaption: ' - '" })

function AddCrossPoolGameDialog() {
    var self = this;

    self.divisions = ko.observableArray([]);
    self.division = ko.observable();

    self.awayDivisionTeams = ko.computed(function () {
        var division = ko.utils.arrayFirst(self.divisions(), function(item) {
            return self.division.Name() == item.Name;
        });

        if (division) {
            return division.DivisionTeamPools;
        }

        return [];
    });
}

推荐答案

你不能同时让 optionsValue 和 value 绑定指向不同的对象，但是你可以创建一个简单的解决方法.

You can't get both the optionsValue and value bindings to point to different objects, but you can create a simple workaround.

为了让您的表单提交一个简单的值，请使用 optionsValue 指向您希望与表单一起发布的绑定项目的属性.然后将 value 绑定分配给一个 observable.最后，创建 computed 以在所选值更改时自动查找并返回正确的对象.

In order to get your form to submit a simple value, use optionsValue to point to your bound item's property that you want posted with the form. Then assign the value binding to an observable. Last, create a computed to automatically find and return the correct object when the selected value changes.

示例绑定:

<select data-bind="options: options,
                   optionsText: 'name',
                   optionsValue: 'id',
                   value: selectedOptionId"></select>
<br/>
<br/>
Selection Option Object : <span data-bind="text: selectedOption"></span><br/>
Selection Option name : <span data-bind="text: selectedOption().name"></span><br/>
Selection Option id : <span data-bind="text: selectedOption().id"></span><br/>

和视图模型:

var optionModel = function(id,name){
    var self = this;
    self.id = id;
    self.name = name;
}

var viewModel = function(){
    var self = this;
    self.options = [
        new optionModel(1,"First"),
        new optionModel(2,"Second")
    ];
    self.selectedOptionId = ko.observable(self.options[0].id);
    self.selectedOption = ko.computed(function(){
        return ko.utils.arrayFirst(self.options, function(item){
            return item.id === self.selectedOptionId();
        });
    });
}

ko.applyBindings(new viewModel());

我已将其发布到这里的 jsFiddle.

希望这有帮助！

这篇关于带有optionsValue和value的knockout.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！