Comment utiliser liaison de données knockout.js lorsque la requête ajax périodiquement actualise automatiquement?

Dans mon application, j'ai régulièrement fait appel ajax une fois toutes les 5 secondes pour obtenir une nouvelle mise à jour à partir du serveur.

Mon ajax données à partir du serveur est tableau JSON qui ressemble à ceci:
[
{
"foo": "valx",
"bar": "valy"

},
{
"foo": "valw",
"bar": "valz"
}
]

Mon code ajax est:

(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 ) {

            }
    });
    })();

Mon code HTML est:

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

Mais cela ne fonctionne pas et je reçois un message d'erreur après le premier appel ajax:
Vous ne pouvez pas appliquer les liaisons plusieurs fois le même élément.

source d'informationauteur rjc

  1. 30

    Vous êtes à proximité. Vous n'appelez applyBindings une fois. Au lieu de ce que vous devez faire est de fixer un observable bien sur votre modèle de vue.

    Voici comment vous pourriez configurer votre modèle de vue:

    function ViewModel() {
    var self = this;

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

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

    Puis, quand vous avez de nouvelles données (par exemple dans votre ajax appel):

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

    Remarque: Vous pouvez définir les données de différentes manières. Si vous souhaitez que votre événement chronométré en dehors de la vue du modèle, alors vous pouvez utiliser le modèle de vue de l'instance (dans mon exemple, viewModel) pour accéder aux propriétés et de les mettre à jour. Vous pouvez placer l'événement chronométré au sein de votre modèle de vue si vous le souhaitez et puis il suffit d'appeler self.data(content) (ou quelque chose de similaire).