KO+bootstrap 模态窗全选绑定

HTML

<div id="modalAreaID01">
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
            data-bind="attr: { 'data-target': modalWindowId },click:modalWindowLoad">
        Launch demo modal
    </button>
</div>
<script src="Content/jquery-2.1.1.min.js"></script>
<script src="Content/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<link href="Content/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="Content/knockout-3.1.0.min.js"></script>
<script src="Content/knockout.mapping.js"></script>
<script src="index.js"></script>

JS

var buidModelWindow = function (showWindowId,dataSorce, htmlAreaID, selectAllKOAction, saveKOAction, closeKOAction) {
    var html = "<div class='modal fade' id='" + showWindowId + "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>"
    + "    <div class='modal-dialog'>"
    + "        <div class='modal-content'>"
    + "            <div class='modal-header'>"
    + "                <button type='button' class='close' data-dismiss='modal' data-bind='click:" + closeKOAction + "'><span aria-hidden='true'>&times;</span><span class='sr-only'>Close</span></button>"
    + "                <h4 class='modal-title' id='myModalLabel'>Modal title</h4>"
    + "            </div>"
    + "            <div class='modal-body'>"
    + "<!"+"-- ko foreach:"
    + dataSorce
    + " -->"
    + "<label><input type='checkbox' data-bind='checked:Enabled' /> <span data-bind='text:Value' /></label>"
    + "<!-- /ko -->"
    + "            </div>"
    + "            <div class='modal-footer'>"
    + "                <button type='button' class='btn btn-primary' data-bind='click:" + selectAllKOAction + "'>SelectAll</button>"
    + "                <button type='button' class='btn btn-default' data-dismiss='modal' data-bind='click:" + closeKOAction + "'>Close</button>"
    + "                <button type='button' class='btn btn-primary' data-bind='click:" + saveKOAction + "'>Save changes</button>"
    + "            </div>"
    + "        </div>"
    + "    </div>"
    + "</div>"
    $("#" + htmlAreaID + "").append(html);
}
var ViewModel = function (data) {
    var self = this;
    self.modelList = ko.mapping.fromJS(data);
    self.modalAreaID = ko.observable("modalAreaID01");
    self.modalWindowId = ko.observable("#modalWindowId01");
    self.modalWindowForeachID = ko.observable("modelList");
    self.isAll = ko.observable(false);
    self.save = ko.observable(false);
    var indexAndEnabled = new Array();
    self.selectAll = function () {
        if (self.isAll() == false) {
            ; i < self.modelList().length; i++) {
                self.modelList()[i].Enabled(true);
            }
            self.isAll(true);
        }
        else {
            ; i < self.modelList().length; i++) {
                self.modelList()[i].Enabled(false);
            }
            self.isAll(false);
        }
    }
    self.saveKOAction = function () {
        self.save(true);
        ; i < self.modelList().length; i++) {
            indexAndEnabled[i] = self.modelList()[i].Enabled();
        }
    }
    self.closeKOAction = function () {
        if (self.save() == false) {
            for (i in indexAndEnabled)
            {
                self.modelList()[i].Enabled(indexAndEnabled[i]);
            }
        } else {
        }
    }
    self.modalWindowLoad = function () {
        self.save(false);
        ; i < self.modelList().length; i++) {
            indexAndEnabled[i] = self.modelList()[i].Enabled();
        }
    }
    buidModelWindow(self.modalWindowId().substring(),
                    self.modalWindowForeachID(),
                    self.modalAreaID(),
                    "selectAll", "saveKOAction", "closeKOAction");
}
$(function () {
    var data =jQuery.parseJSON('{"KVPEList":[{"Key":null,"Value":"阿富汗","UIID":"uiid_Country_101","Enabled":false,"Pattern":"101","Percentage":-1},{"Key":null,"Value":"巴林","UIID":"uiid_Country_102","Enabled":false,"Pattern":"102","Percentage":-1},{"Key":null,"Value":"孟加拉国","UIID":"uiid_Country_103","Enabled":false,"Pattern":"103","Percentage":-1}],"Enabled":false}');
    ko.applyBindings(new ViewModel(data.KVPEList));

});

代码下载：http://files.cnblogs.com/badnewfish/modalWindowKO.rar