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());

I've posted this to a jsFiddle here

希望这有帮助！

具有optionsValue和value的knockout.js

1 个答案: