Question

我已经将MVC 4中的日期选择器与Knockout 2.0拼凑在一起，并且有兴趣获得有关如何改进它的建议，并最终使其在整个应用程序中可重复使用。

我的客户更喜欢这种格式，包括每个日期部分的选择列表。

代码尚未设置初始/最终状态。我通过启用/禁用列表来控制工作流程，并查找所选月份的日期。

感谢您的建议。

@{
    var yearOptions = Enumerable.Range(1930, 2010-1930+1);
    var monthOptions = System.Globalization.DateTimeFormatInfo.CurrentInfo
        .MonthNames
        .TakeWhile(x => x != String.Empty)
        .Select((x,i) => new  
        {  
          Value = i,  
          Text = x
        });
}


<div id="the_model">
    <form>
        <div class="editor-row">
            <label>Date of Birth</label>
            @Html.HiddenFor(m => m.BirthDate, new { data_bind = "value: birthDate" })
            <select data-bind="options: yearOptions, value: birthDateYear, optionsCaption: 'year'"></select>&nbsp;
            <select data-bind="enable: birthDateYear, options: monthOptions, optionsValue: 'Value', optionsText: 'Text', value: birthDateMonth, optionsCaption: 'month'"></select>&nbsp;
            <select data-bind="enable: birthDateMonth, options: dayOptions, value: birthDateDay, optionsCaption: 'day'"></select>&nbsp;
        </div>
    </form>
</div>

<script type="text/javascript">
    function daysInMonth(month, year) {
        return new Date(year, month, 0).getDate();
    }

    var yearOptions = @Html.Raw(Json.Encode(yearOptions));
    var monthOptions = @Html.Raw(Json.Encode(monthOptions));

    var TheModel = function () {
        var self = this;

        this.birthDate = ko.observable('@Model.BirthDate');
        this.birthDateYear = ko.observable();
        this.birthDateMonth = ko.observable();
        this.birthDateDay = ko.observable();

        this.dayOptions = ko.observableArray([]);

        this.submit = function () {
            // validate and post
        };

            this.birthDateYear.subscribe(function (val) {
    console.log('birthDateYear: ' + val);
    if(parseInt(val) > 0) {
        self.fillDayOptions();
    }
});

this.birthDateMonth.subscribe(function (val) {
    console.log('birthDateMonth: ' + val);
    if(parseInt(val) > 0) {
        self.fillDayOptions();
    }
});

this.birthDateDay.subscribe(function (val) {
    console.log('birthDateDay: ' + val);
    if(parseInt(val) > 0){
        self.birthDate(getBirthDate(self.birthDateYear(), self.birthDateMonth(), val));
    }
});

this.fillDayOptions = function() {
    //self.birthDateDay({});

    var month = self.birthDateMonth();
    var year = self.birthDateYear();

    if(month && year) {
        self.dayOptions([]);
        for(var  i = 0; i < daysInMonth(month, year); i++) {
            self.dayOptions.push(i + 1);
        }
    }

    //self.birthDateDay(null);
};

    var viewModel = new TheModel();
    ko.applyBindings(viewModel, document.getElementById("the_model"));
</script>

Answer 1

optionsCaption绑定参数实际上将一个选项添加到列表开头的选项列表中。

因此，当您编写清除所有选项并用新选项替换它们的代码时，就Knockout而言，optionsCaption特殊项目并不存在。那是你的问题。

要解决此问题，只需更改删除代码即可跳过第一项：updated fiddle here

建议请在MVC Razor和Knockout中完成多选列表日期

1 个答案: