首页 > 代码库 > 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‘>×</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 模态窗全选绑定
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。