首页 > 代码库 > KO+bootstrap 模态窗全选绑定

KO+bootstrap 模态窗全选绑定

HTML:

<!-- Button trigger modal --><div id="modalAreaID01">    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"            data-bind="attr: { ‘data-target‘: modalWindowId }">        Launch demo modal    </button></div><script src=http://www.mamicode.com/"/Content/jquery-2.1.1.min.js"></script><script src=http://www.mamicode.com/"/Content/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script><link href=http://www.mamicode.com/"/Content/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" /><script src=http://www.mamicode.com/"/Content/knockout-3.1.0.min.js"></script><script src=http://www.mamicode.com/"/Content/knockout.mapping.js"></script>

JS:

var ViewModel = function (data) {    var self = this;    self.ModelList = ko.mapping.fromJS(data.ModelList);    self.modalAreaID = ko.observable("modalAreaID01");    self.modalWindowId = ko.observable("#modalWindowId01");    self.modalWindowForeachID = ko.observable("ModelList()[0].SenderCountries.KVPEList");    self.selectAll = function () {        for (var i = 0; i < self.ModelList()[0].SenderCountries.KVPEList().length; i++)        {            self.ModelList()[0].SenderCountries.KVPEList()[i].Enabled(true);        }    }    var html = "<div class=‘modal fade‘ id=‘" + self.modalWindowId().substring(1) + "‘ 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‘><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:"     + self.modalWindowForeachID()     + " -->"     + "<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:selectAll‘>SelectAll</button>"     + "                <button type=‘button‘ class=‘btn btn-default‘ data-dismiss=‘modal‘>Close</button>"     + "                <button type=‘button‘ class=‘btn btn-primary‘>Save changes</button>"     + "            </div>"     + "        </div>"     + "    </div>"     + "</div>"    $("#modalAreaID01").append(html);}$(function () {    $.getJSON("/OffLine/GetAllFromDataBase", function (data) {        ko.applyBindings(new ViewModel(data));    });});

 

KO+bootstrap 模态窗全选绑定