带有 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 绑定分配给可观察对象。最后，创建一个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());

I've posted this to a jsFiddle here.

希望这会有所帮助！