0
votes

I am working on a page with knockout.js and bootstraptable,I don't know why the table did not render.Need help!

Here is my sample code:

knockout viewmodel

var SelectViewModel = function (id, text) {
this.Id = ko.observable(id);
this.Text = ko.observable(text);
};

var PageViewModel=function(){
var self=this;
self.SmartTypeList=ko.observableArray([]);
self.SmartTypeQueryList=ko.observableArray([new SelectViewModel(-1,"ALL")]);
self.Operation;
self.InitData=function()
{
$.post(getRootPath_web()+'/Backend/ZigbeeEquipmentType/ListAll',
function(data){
        for(c in data){
            self.SmartTypeList.push({Id:data[c].id,Text:data[c].name});
            self.SmartTypeQueryList.push({Id:data[c].id,Text:data[c].name});
        }   
        bootsModel.initTable();
    },'json');
}
}

bootstraptable model

var bootstrapTableModel=function(){
var self=this;
self.queryParams = function (params) {
    var temp = {   
        limit: params.limit,   
        offset: params.offset,  
        query_typeId: $("#EqTypeQuerySelect").val(),
        query_sn: $("#QuerySN").val()
    };
    return temp;
};
self.initTable=function()
{
    $('#SmartEQTable').bootstrapTable({
        method: 'post',
        url:getRootPath_web()+'/Backend/ZigbeeEquipment/List',
        contentType:"application/x-www-form-urlencoded",
        toolbar: '#toolbar',                
        ....somthing....               
        onLoadError: function (status) {
            alert("error");
        },
        onLoadSuccess: function (data) {
            alert("ok");
        }
    });
}}

var viewModel=new PageViewModel();
var bootsModel=new bootstrapTableModel();

Get binded and init data (function(){ viewModel.InitData(); ko.applyBindings(viewModel); })();

1
without knockout,bootstraptable works well.when with knockout ,no request handled on server.nini
Can you show us what your HTML looks like? Using jQuery selectors to get elements and values from the DOM inside a knockout viewmodel is bad practice. Usually you'd make a custom binding for these kind of jQuery widgets.user3297291

1 Answers

0
votes
<extend name="./TPL/default/MainPage/layout.tpl" />
<block name="maincontent">
<div class="modal fade" id="MainModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add</h4>
            </div>
            <div class="modal-body">
                <form id="MainForm" method="post">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-3" for="Equipment_Type">Type</label>
                            <div class="col-md-9">
                                <select class="form-control type-select" data-bind="options:SmartTypeList,optionsText:'Text',optionsValue:'Id'" name="EqTypeSelect"></select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3" for="Corporation">STB</label>
                            <div class="col-md-9">
                                <input type="hidden" class="form-control" id="Form_ID" data-bind="value:Id">
                                <input class="form-control" id="Form_SN" name="Form_SN" data-bind="value:Name"></input>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-bind="click:A_Save_Click" id="btnSave">Save</button>
            </div>

        </div>
    </div>
</div>
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12">
                    <div class="row">
                        <div class="col-lg-12 col-sm-12 col-xs-12">
                             <div class="widget">
                                        <div class="widget-body">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                        <label for="SN" class="col-lg-1 control-label no-padding-right">SN:</label>
                                                        <div class="col-lg-2">
                                                            <input type="text" class="form-control" id="QuerySN" placeholder="SN">
                                                        </div> 

                                                        <label for="Param_DType" class="col-lg-2 control-label no-padding-right">Type:</label>
                                                        <div class="col-lg-2">
                                                            <select id="EqTypeQuerySelect" name="EqTypeQuerySelect" class="form-control type-select" data-bind="options:SmartTypeQueryList,optionsText:'Text',optionsValue:'Id'" ></select>
                                                        </div>                                                  
                                                </div>

                                                <div class="form-group">
                                                    <div class="col-sm-offset-0 col-sm-1">
                                                        <a id="A_Query"  class="btn btn-success shiny" data-bind="click:A_Query_Click">Query</a>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <div class="input-group" margin="10">
                                                        <a id="A_Add" class="btn btn-default purple" data-bind="click:A_Add_Click"><i class="fa fa-plus"></i> Add</a>
                                                        <a id="A_Edit" class="btn btn-primary" ><i class="fa fa-shopping-cart"></i> Modify</a>
                                                        <a id="A_Del" class="btn btn-danger" ><i class="fa fa-times"></i> Del</a>
                                                    </div>

                                                </div>
                                                </form>
                                        </div><!--Widget Body-->
                                        <div class="widget-body">
                                        <table data-toggle="table" class="table table-striped table-bordered table-hover" id="SmartEQTable" >
                                            <thead>
                                            <tr>
                                                <th data-field="id">ID</th>
                                                <th data-field="sn">SN</th>
                                                <th data-field="smarttype">Type</th>
                                            </tr>
                                            </thead>
                                        </table>

                                        </div><!--Widget Body-->
                                        <div class="widget-body">
                                            <p>
                                                Without any change in default mark-up.
                                            </p>
                                        </div><!--Widget Body-->
                                    </div><!--Widget-->
                        </div>
                    </div>

                    <div class="row">
                    </div>

                    <div class="row">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="__PUBLIC__/PageJS/Page.js"></script>

    <script type="text/javascript" src="__PUBLIC__/PageJS/Equipment/ZigbeeTestManagement.js"></script>
    <script  type="text/javascript">

    </script >

</block>