knockout+bootstrap--一些复杂的应用合集

一、针对My97日历控件的绑定

普通绑定和特殊格式绑定（红色部分）

<!-- ko foreach: items -->
<td class="ruyeeTableTDLable"> <span>批准专业日期</span></td>
<td class="ruyeeTableDataCell">
    <div class="input-group">
        <input data-validation-engine="validate[maxSize[10]],validate[required],custom[date],"
               data-bind="attr: { id: ‘A7615‘ +$index(),value:A7615} " type="text" class="form-control">
        <div class="input-group-addon ">
            <span class="glyphicon glyphicon-calendar"
                  data-bind="attr: { onclick: ‘WdatePicker({ el:A7615‘ + $index() + ‘})‘ }">

            </span>
        </div>
    </div>
</td>
<td class="ruyeeTableTDLable"> <span>转业年份</span></td>
<td class="ruyeeTableDataCell">
    <div class="input-group">
        <input data-validation-engine="validate[maxSize[10]],validate[required],validate[date],"
               data-bind="attr: { id: ‘A7616‘ +$index(),value:A7616} " type="text" class="form-control">
        <div class="input-group-addon ">
            <span class="glyphicon glyphicon-calendar"
                  data-bind="attr: { id: ‘WP_A7616_‘ +$index()} "></span>
        </div>
    </div>
</td>
<!-- /ko -->

/// <reference path="../knockout-3.2.0.js" />
var koList;
var deletedIds = Array();
var ViewModel = function (data, func) {
    var self = this;
    self.items = ko.mapping.fromJS(data.items);
    self.struct = ko.mapping.fromJS(data.structV);
    builLeftNva(self);
    self.success = ko.observable();
    self.success.subscribe(function (nv) {
        var success = $.trim(nv);
        if (success.length > 0) {
            $(‘#success‘).modal(‘show‘);
        }
    });
    self.canSubmit = ko.observable(false);
    self.submit = function () {
        if ($("#form_id").validationEngine("validate")) {
            for (var i = 0; i < koList().length; i++) {
                //时间格式转换
                koList()[i].A7615($(‘#A7615‘ + i).val());
                koList()[i].A7616($(‘#A7616‘ + i).val());
            }
            $.ajax({
                url: postOneModelActionUrl,
                contentType: "application/json",
                type: "POST",
                data: ko.mapping.toJSON({ items: self.items, deletedIdList: deletedIds }),
                success: function (response) {
                    self.success(response.Description);
                },
                async: false
            });
        }
    };

    self.closeSuccess = function () {
        self.success(‘‘);
        $(‘#success‘).modal(‘toggle‘);
    };

    self.deleteOne = function (item) {
        self.items.remove(item);
        if (item.ID() != null) {
            deletedIds.push(item.ID());
        }
    }
    self.addNew = function () {
        //新增时的特殊处理
        var js = ko.mapping.toJS(self.struct);
        js.A7615 = getDateString();
        js.A7616 = getDateString();
        var newItem = ko.mapping.fromJS(js);
        self.items.push(newItem);
        func();
    }
    self.canSubmit(true);
    $(‘#form_id‘).validationEngine();
    koList = self.items;
    //延时处理，解决KO性能问题
    setTimeout(func, 500);
}
var refreshList = function () {
    for (var i = 0; i < koList().length; i++) {
        //时间格式转换，如果是新增的（新增的ID为null）则无需转换
        if (koList()[i].ID != null) {
            $(‘#WP_A7616_‘ + i).click(function () {
                WdatePicker({
                    dateFmt: ‘yyyy-MM‘,
                    el: $(‘#A7616‘ + this.getAttribute(‘id‘).split(‘_‘)[2]).attr(‘id‘)
                });
            })
            koList()[i].A7615(changeDateFormat(koList()[i].A7615()));
            koList()[i].A7616(changeDateFormat(koList()[i].A7616(), null, null, null, false));
        }
    }
};
$(document).ready(function () {
    $(‘#create‘).addClass(‘active‘);
    $.ajax({
        url: getStructActionUrl,
        contentType: "application/json",
        type: "POST",
        data: JSON.stringify({ A01ID: QueryString.GetValue(‘a01id‘) }),
        success: function (data) {
            ko.attach("A76Model", new ViewModel(data, refreshList));
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            switch (XMLHttpRequest.status) {
                case 401:
                    changeLocationToLogin();
                    break;
            }

        }
    });
})