带有 optionsValue 和 value 的 knockout.js

Question

有没有办法保留value绑定(bind)到对象，但有 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绑定(bind)指向不同的对象，但您可以创建一个简单的解决方法。

为了让您的表单提交一个简单的值，请使用 optionsValue指向要与表单一起发布的绑定(bind)项目的属性。然后分配 value绑定(bind)到可观察对象。最后，创建一个 computed当所选值发生变化时自动查找并返回正确的对象。

示例绑定(bind):

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

和 View 模型:

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 .

希望这可以帮助!