具有optionsValue和value的knockout.js

Question

有没有办法保持value绑定到对象,但有optionsValue一个属性在对象上.截至目前,如果我同时指定两者,optionsValue则所选的属性将填充value绑定.我希望在observable中保持对象完整,但是指定在选择列表值中设置的值.这样一个表单提交将发送optionsValue我选择的.

@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 [];
    });
}

Answer 1

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

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

示例绑定:

<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.

希望这可以帮助!