码迷,mamicode.com
首页 > 其他好文 > 详细

KO+bootstrap 模态窗全选绑定

时间:2014-11-01 14:50:18      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   color   os   ar   for   sp   div   

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="/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>

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 模态窗全选绑定

标签:style   blog   io   color   os   ar   for   sp   div   

原文地址:http://www.cnblogs.com/badnewfish/p/4067115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!