Question

以下html / JavaScript是我尝试使用下拉菜单修改文本框中的两个值。

<select type="date" data-bind="options: dateranges, 
optionsText: 'rangeName', optionsCaption: 'Choose' ">
<select>
<br>
<input type="date" data-bind="value: rangeStartVal , valueUpdate: 'afterkeydown'" />
<br />
<input type="date" data-bind="value: rangeStopVal , valueUpdate: 'afterkeydown'" />

<script type="text/javascript">
    var RangeValue = function (name, startVal, stopVal) {
        this.rangeName = name;
        this.rangeStartVal = startVal;
        this.rangeStopVal = stopVal;
        return
    };

    var viewModel = {

        dateranges: ko.observableArray([
        new RangeValue("Today", "2014-04-28", "2014-04-28"),
        new RangeValue("Yesterday", "2014-04-27", "2014-04-27"),
        new RangeValue("This Week", "2014-04-28", "2014-05-04"),
        new RangeValue("Last Week", "2014-04-21", "2014-04-27"),]),
    };

    ko.applyBindings(viewModel);
</script>

我想每当我更改下拉列表中的值以修改每个文本框中的值时，一个是起始值，一个是停止值。

Answer 1

您必须定义一个包含所选范围的属性。然后将输入绑定到selectedRange的rangeStartVal和rangeStopVal属性。

FIDDLE

你也会注意到 IF 绑定，它基本上不会绑定任何东西并隐藏元素，除非你选择了setRange。

<select type="date" data-bind="options: dateranges, 
optionsText: 'rangeName', optionsCaption: 'Choose', value: selectedRange ">
<select>
<br>
<div data-bind="if: selectedRange() != undefined">
<input type="date" data-bind="value: selectedRange().rangeStartVal , valueUpdate: 'afterkeydown'" />
<br />
<input type="date" data-bind="value: selectedRange().rangeStopVal , valueUpdate: 'afterkeydown'" />
</div>

您的视图模型：

var RangeValue = function (name, startVal, stopVal) {
    var self = this;
    self.rangeName = name;
    self.rangeStartVal = startVal;
    self.rangeStopVal = stopVal;
};

function myVm() {
    var self = this;
    self.dateranges = ko.observableArray([
        new RangeValue("Today", "2014-04-28", "2014-04-28"),
        new RangeValue("Yesterday", "2014-04-27", "2014-04-27"),
        new RangeValue("This Week", "2014-04-28", "2014-05-04"),
        new RangeValue("Last Week", "2014-04-21", "2014-04-27")]);

    self.selectedRange = ko.observable();
}
var viewModel = new myVm();
ko.applyBindings(viewModel);

Answer 2

    <select type="date" data-bind="options: dateranges,
            optionsText: 'rangeName', optionsCaption: 'Choose',value:key ">
    </select>
    <br>
    <input type="date" data-bind="value: selectedRangeObj.start , valueUpdate: 'afterkeydown'" />
    <br />
    <input type="date" data-bind="value: selectedRangeObj.end , valueUpdate: 'afterkeydown'" />

    <script type="text/javascript">

        function viewModel() {
            var self = this;
            self.dateranges = [
                {key: "Today", start: "2014-04-28", end: "2014-04-28"},
                {key: "Yesterday", start: "2014-04-27", end: "2014-04-27"},
                {key: "This Week", start: "2014-04-28", end: "2014-04-05"},
                {key: "This Week", start: "2014-04-21", end: "2014-04-27"}];
            self.selectedRange = ko.observable();
            self.selectedRangeObj = ko.computed(function() {
                var match = ko.utils.arrayFirst(dateranges(), function(item) {
                    return selectedRange() === item.key;
                });
            }, this);
        }
        var myViewModel = new ViewModel();
    </script>

下拉列表以使用knockout修改文本框值

2 个答案: