Question

我需要我的选择选项来获得一个值因为我将表单发布回服务器而asp.net mvc需要知道该值。如果我绑定并将'value'设置为对象的实例，我想要这样做，因为其他绑定从所选对象值中读取，那么这些选项没有html值属性。 value属性是提交表单时所需的属性。如果我设置了optionsValue并将其指向该项的id，那么它将覆盖我的值绑定，并且我得到的错误是该对象没有我绑定的属性。

我可以使用计算类型的读/写选项进行设置，但我想知道是否有更简单的方法。

感谢，

选项没有价值;

 <select data-bind="options: $root.meetingEvents,
                    value: $data.meetingEvent,
                    optionsText: 'meetingEventName',
                    optionsCaption: ' '">

选项具有值但是在选中时，它是被推入值的meetingEventId，因此没有其他控件绑定到的其他属性。

<select data-bind=" options: $root.meetingEvents,
                    value: $data.meetingEvent,
                    optionsText: 'meetingEventName',
                    optionsValue: 'meetingEventId'
                    optionsCaption: ' '">

Answer 1

这是他们需要将此绑定功能添加到淘汰赛的另一个重要原因。您不应限制在绑定到值对象或valueOption之间进行选择。

你已经列出了计算的可观察方法，我可能会采取这种方法;使用optionsValue绑定打开然后添加一个保留所选对象的计算observable

您还可以做一些更加费劲的事情，并在表单上注册回调，然后动态插入值，以便它将分开... ...

Answer 2

最后我添加了一个新的计算observable，当值进入时，我从数组中找到该项并在我的视图模型上手动设置它。

<select data-bind=" options: $root.meetingEvents,
                    value: $data.meetingEventId,
                    optionsText: 'meetingEventName',
                    optionsValue: 'meetingEventId'
                    optionsCaption: ' '">

//添加到视图模型

 this.meetingEventId = ko.computed({
                    write: function (value) {
                        var meetingEvent = ko.utils.arrayFirst(vm.meetingEvents(), function (item) {
                            return value === item.meetingEventId();
                        });

                        this.meetingEvent(meetingEvent);
                    },
                    read: function() {
                        return this.meetingEvent() ? this.meetingEvent().meetingEventId : "";
                    },
                    owner: this
                });

Answer 3

我会采取略有不同的方法。将meetingEventId和meetingEvent属性保持为observables，但添加对meetingEventId的订阅，以在meetingEventId更改时更新meetingEvent。

HTML

    <select data-bind=" options: $root.meetingEvents,
                value: $data.meetingEventId,
                optionsText: 'meetingEventName',
                optionsValue: 'meetingEventId'
                optionsCaption: ' '">

的Javascript

this.meetingEventId = ko.observable('');
this.meetingEvent = ko.observable(null);

this.meetingEventId.subscribe(function(){
    var meetingEventId = this.meetingEventId();
    var meetingEvent = ko.utils.arrayFirst(vm.meetingEvents(), function (item) {
        return meetingEventId === item.meetingEventId();
    });

    this.meetingEvent(meetingEvent);        
});

如何获得淘汰选择使用值和valueOption

3 个答案: