javascript - ajax请求周期自动刷新时如何使用knockout.js数据绑定(bind)？

Question

在我的应用程序中，我定期每 5 秒调用一次 ajax 以从服务器获取新更新。

我来自服务器的 ajax 数据是 JSON 数组，如下所示: [ { “富”:“瓦尔克斯”， “酒吧”:“值(value)”

}, { “富”:“值”， “酒吧”:“瓦尔兹” } ]

我的 ajax 代码是:

(function update() {

    $.ajax({
        type : 'GET',
        url : url,
        data : {

        },
        dataType : "json",
        global : false,
        success : function(content, textStatus, jqXHR) {
        myViewModel = content;
        ko.applyBindings(myViewModel);

        },
        complete: function() {

         setTimeout(update, 5000);
          },

        error: function( xhr, textStatus ) {

            }
    });
    })();                       

我的 HTML 是:

<tbody data-bind="foreach: myViewModel">
                        <tr>
                            <td data-bind="text: foo"></td>
                            <td data-bind="text: bar"></td>
                        </tr>
                    </tbody>

但这不起作用，在第一次 ajax 调用后出现错误: 您不能对同一个元素多次应用绑定(bind)。

Answer 1

你很接近。您只需调用一次 applyBindings。相反，您应该做的是在您的 View 模型上设置一个 observable 属性。

以下是设置 View 模型的方式:

function ViewModel() {
    var self = this;

    self.data = ko.observableArray();
};

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

然后当您有新数据时(例如在您的 ajax 调用中):

$.ajax({
    success : function(content, textStatus, jqXHR) {
        viewModel.data(content);
    }
});

注意:您可以通过几种不同的方式设置数据。如果你希望你的定时事件在 View 模型之外，那么你可以使用 View 模型实例(在我的示例中，viewModel)来访问属性并更新它们。如果需要，您可以将定时事件放置在您的 View 模型中，然后只需调用 self.data(content)(或类似的东西)。