使用 Knockout.js 更新 UI 控件

Question

我正在开发 knockout.js，并且是全新的。我正在从 Web API 动态获取数据并绑定到表。代码如下：

var RowNumber;
var viewModel = {};
var url_paging = "http://192.192.192.192/api/OLMS/GetOlDetailsByRowNumber?token=" + tokenval + "&rowNumber=1";
$(document).on("pageinit", "#grid_page", function () {
      $.getJSON(url_paging, function (data) {
                var newLeads = ko.mapping.fromJS(data);
                viewModel.model = newLeads;
                RowNumber = data.SequenceNo;
                ko.applyBindings(viewModel, document.getElementById("oltable"));                    
            });
});

and HTML :

<table data-bind="attr: { 'id': OLId }" class="zebra-striped" style="margin: 0 auto;">
                                <tbody>
                                    <tr>
                                        <td colspan="4" style="height: 30px; font-size: 16px; vertical-align: middle; text-align: center; font-weight: bold;">
                                            OPINION LEADER DETAILS FOR <span data-bind="text: OLFirstName"></span><span data-bind="text: OLMiddleName"></span><span data-bind="text: OLLastName"></span>, <span data-bind="text: Degrees"></span>.
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 10%;">
                                            <img data-bind="attr: {src: 'https://olms.kolonlinemnk.com/Uploads/Mallinckrodt/Photo/1214/' + Photo()}"
                                                 alt="" style="border: 1px solid #DDD; width: 100px; height: 125px;">
                                        </td>
                                        <td style="width: 30%;">
                                            <span data-bind="text: Title"></span>
                                            <br />
                                            <span data-bind="text: Department"></span>
                                            <br />
                                            <span data-bind="text: Address1"></span>
                                            <br />
                                            <span data-bind="text: Address2"></span>
                                            <br />
                                            <a class="nounderline" data-bind="attr: {href: 'tel:' + Phone()}">
                                                <span data-bind="text: Phone"></span>
                                            </a>
                                        </td>
                                        <td style="width: 30%;">
                                            Influence: <br />
                                            Category: <br />
                                            Tier: <span data-bind="text: Tier"></span>
                                            <br />
                                            Top 25<br />
                                            Type: <br />
                                            Interests:
                                        </td>
                                        <td style="width: 30%;">
                                            Distance: <br />
                                            Last Interaction:<span style="color: red;"></span><br />
                                            <br />
                                            <a href="mailto:steve.abram@mcwpain.org">
                                                <img class="imagepadding" alt="" src="images/icon-email.png">
                                            </a>
                                            <a target="_parent"
                                               href="interactionview.html">
                                                <img class="imagepadding" alt="" src="images/icon-addcomment.png">
                                            </a>
                                            <a target="_parent"
                                               href="pov.html">
                                                <img class="imagepadding" alt="" src="images/icon-statistics.png">
                                            </a>
                                            <a target="_parent" href="profile.html">
                                                <img class="imagepadding" alt="" src="images/icon-insertpictureleft.png">
                                            </a>
                                            <a target="_parent" href="map_directions.html">
                                                <img class="imagepadding" alt="" src="images/icon-automobile-car.png">
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

现在我有上一个和下一个按钮：

上一页 下一个

点击下一步它应该从数据库中获取记录并显示在表中：

  function GetNextOL() {
                var url_NextOL = "http://192.192.192.192:8080/api/OLMS/GetOlDetailsByRowNumber?token=" + tokenval + "&rowNumber=1" + (RowNumber + 1) ;
                alert("before");
                $.getJSON(url_NextOL, function (data) {
                    var nextOL = ko.mapping.fromJS(data);
                    alert(nextOL);
                    //viewModel.model = nextOL;
                    // var _data = $("oltable"); 
                    //ko.cleanNode(_data);
                    //ko.applyBindings(viewModel, document.getElementById("oltable"));
                    ko.mapping.fromJS(nextOL, viewModel);
                });
                alert("after");
        }        

我收到以下错误：

knockoutjs 不能对同一个元素多次应用绑定。

如何使用不同的数据更新相同的 UI？

Answer 1

您使用的映射插件有点错误，它需要 3 个参数

ko.mapping.fromJS(data, options, objectToUpdate);

查看示例

http://jsfiddle.net/jk5NF/

Answer 2

您应该只调用一次ko.applyBindings，而不是在可能被多次调用的事件处理程序中。