How to Integrate Knockout with HTML5

   <div class="row">
                <div class="col-md-12 pr0">
                    <div class="col-md-12 pr0" style="overflow-y:scroll;height:330px;overflow-x: hidden;" data-bind="foreach:filterBooks">
                        <!-- ko if: BookClassificationID() ==1 -->
                        <div class="col-xs-6 col-sm-4 col-md-3  book"  >
                            <table>
                                <tr><td><img data-toggle="popover" data-bind="visible:HasImage()==true, attr: { src: '/Content/img/bookimages/'+ID()+'.jpg' }, event: { mouseover: $parent.ShowBookCover(ID())}" />
                                        <img data-toggle="popover" data-bind="visible:HasImage()==false, attr: { src: '/Content/img/bookimages/notfound.jpg' }, event: { mouseover: $parent.ShowBookCover('notfound')}" />
                                    </td></tr>
                                <tr><td><span data-bind="visible:IsNew()==true">جديد</span></td></tr>
                                <tr><td><h5 data-bind="text:BookName"></h5></td></tr>
                                <tr><td><p data-bind="text:AuthorName"><span class="glyphicon glyphicon-user"></span></p></td></tr>
                                <tr><td class="center"><div data-bind="visible:Parts()!='' || Parts()!=0" style="display: -webkit-inline-box;">عدد المجلدات: <p data-bind="text:Parts"></p></div></td></tr>
                                <tr><td><input class="bookcheckbox" type="checkbox" data-bind="checkedValue: $data,attr: { name: 'in' + $index() }, checked: $parent.selectedBooks"></td></tr>
                            </table>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
            </div>

<div class="row">
        <div class="col-xs-12 col-sm-12">
            <div class="table-responsive" style=" margin-top: 0px">
                <table class="table table-hover  table-bordered">
                    <thead class="bg-info">

                        <tr>
                            <th class="droid">
                                <center>
                                    م
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    إسم الكتاب
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    إسم المؤلف
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    مؤذن
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    إمام
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    خطيب
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    إمام وخطيب
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    جديد؟
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    المخزون
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    تعديل
                                </center>
                            </th>
                            <th class="droid">
                                <center>
                                    حذف
                                </center>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="center bgwhite" data-bind="foreach:ListBooksArray">

                        <tr>
                            <td data-bind="text:$index() + 1">SNO</td>
                            <td data-bind="text:BookName"><center>Book Name</center></td>
                            <td data-bind="text:AuthorName"><center>AuthorName</center></td>
                            <td><center><input class="Moathencheckbox" type="checkbox" data-bind="attr: { name: 'in' + $index() }, checked: forMoathen" disabled="disabled"></center></td>
                            <td><center><input class="forImamcheckbox" type="checkbox" data-bind="attr: { name: 'in' + $index() }, checked: forImam" disabled="disabled"></center></td>
                            <td><center><input class="forkhateebcheckbox" type="checkbox" data-bind="attr: { name: 'in' + $index() }, checked: forkhateeb" disabled="disabled"></center></td>
                            <td><center><input class="forImamKhateebcheckbox" type="checkbox" data-bind="attr: { name: 'in' + $index() }, checked: forImamKhateeb" disabled="disabled"></center></td>
                            <td data-bind="text:IsNew()===true ? 'نعم':'لا',attr:{'class':IsNew()===true ? 'NewBookCss' : ''}"><center></center></td>
                            <td data-bind="text:Parts"><center>Parts</center></td>
                            <td><center><a href="#" data-bind="click:function(){$parent.RedirecttoEditBook(ID())}"><span class="glyphicon glyphicon-edit blue s16"></span></a></center></td>
                            <td><center><a href="#" data-bind="click:function(){$parent.DeleteBookConfirmation($data)}"><span class="glyphicon glyphicon-remove red s16"></span></a></center></td>
                        </tr>

                    </tbody>
                    <tr><td data-bind="visible: ListBooksArray().length == 0"><span>لا توجد نتائج بحث</span></td></tr>
                </table>
                @*             Pagination     *@
                <div data-bind="with: $root.PagingSetUp">
                    @Html.Partial("_Pagination")
                </div>
                @*             Pagination     *@
            </div>

        </div>
    </div>


@section Scripts {

        <script src='@Url.Content("~/JS_DTO/BooksDTO.js")' type="text/javascript"></script>
        <script src='@Url.Content("~/JS_DTO/BookClassificationDTO.js")' type="text/javascript"></script>
        <script src='@Url.Content("~/JS_UI/ManageBooksUI.js")' type="text/javascript"></script>

        <script type="text/javascript">

         
            var DeleteBookURL = '@Url.Action("DeleteBook", "ManagingBooks")';


            $(document).ready(function () {

                var owner = new ManageBooksUI();
                owner.BookObj = new BooksDTO(new Object());
             
                // Bind List of Books
                var ListBooks = @Html.Raw(Json.Encode(ViewBag.ListBooks))
                owner.BindBookList(ListBooks);

                // Bind List of BookNames
                var ListBookNames = @Html.Raw(Json.Encode(ViewBag.ListBookNames))
                owner.GetBookNamesList(ListBookNames);
                owner.BookObj.IsNew('null');
                ko.applyBindings(owner);

            });
        </script>
    }