knockout + bootstrap 2 template

knockout + twitter bootstrap 2 template

by wwwroot

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<div id="adequate-explanation" class="modal" data-backdrop="static" style="width: 80%; height: 80%; left: 10%; max-height: 80%; margin: 0;" tabindex="-1" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" aria-hidden="true" data-dismiss="modal">&times;</button>
         <h3>Modal pop-up</h3>

    </div>
    <div class="modal-body" style="max-height: 82%; height: 100%;" data-bind="event: { scroll: onScroll }">
        <div class="row-fluid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis neque, bibendum vitae lobortis ut, dignissim eget nisl. Sed non neque lorem. Aenean cursus tempus tortor, id pharetra massa dapibus nec. Etiam dictum vehicula purus ac porttitor. Aenean ac lectus cursus, tristique massa viverra, ultrices ligula. Donec aliquet cursus massa non venenatis. Fusce vitae risus auctor, scelerisque magna in, posuere massa. Aliquam ultricies felis a eleifend pellentesque. Sed tincidunt mollis rutrum. Duis ac elit eu nisi pharetra tempor. Etiam at tellus ut dolor varius cursus. Praesent et lacus in dolor ultrices pharetra. Curabitur non nunc quis ipsum tristique sollicitudin. Quisque ullamcorper mollis accumsan. Sed id est felis. Nunc elit velit, congue quis mi at, dapibus vestibulum arcu. Donec feugiat, velit nec bibendum lacinia, nibh urna accumsan eros, convallis pulvinar enim sapien vel dui. Quisque suscipit tristique sagittis. Curabitur ultrices elementum felis, a lobortis urna ultricies vitae. Fusce ornare bibendum dolor et sagittis. Proin posuere malesuada lorem pulvinar faucibus. Aliquam erat volutpat. Proin faucibus purus odio, in bibendum magna ultricies quis. Sed condimentum id erat id...

JavaScript

function AdequateExplanationViewModel() {
           this.scrolledToBottom = ko.observable(false);
           this.onScroll = function (data, event) {
               var el = event.target,
                   $el = $(el),
                   scrollPosition = $el.scrollTop() + $el.innerHeight();
console.log(scrollPosition - el.scrollHeight);
               if ($el.scrollTop() === 0) return;
               this.scrolledToBottom(scrollPosition >= (el.scrollHeight));
           };
       }

       ko.applyBindings(AdequateExplanationViewModel())