Vous ne pouvez pas appliquer les liaisons plusieurs fois le même élément

J'ai un Bootstrap modal, et à chaque fois qu'il se montre, je vais utiliser KO pour lier un <select> liste déroulante.

HTML:

<select id="album" name="album" class="form-control" data-bind="options: availableAlbums">
</select>

JavaScript:

$('#uploadModal').on('show.bs.modal', (function () {
        function AlbumsListViewModel() {
            var self = this;
            self.availableAlbums = ko.observableArray([]);

            $.ajax({
                url: "../../api/eventapi/getalbums",
                type: "get",
                contentType: "application/json",
                async: false,
                success: function (data) {
                    var array = [];
                    $.each(data, function (index, value) {
                        array.push(value.Title);
                    });
                    self.availableAlbums(array);
                }
            });
        }

        ko.applyBindings(new AlbumsListViewModel());
    }));

Cependant, sur le deuxième indice, KO vais me présenter avec cette erreur:

Erreur: Vous ne pouvez pas appliquer les liaisons plusieurs fois le même élément.

OriginalL'auteur Alvin | 2014-01-05

  1. 5

    Le message d'erreur dit plus. Vous avez deux options:

    1. Appeler le applyBindings fonction qu'une seule fois, lorsque votre page se charge. KO mettra automatiquement à jour la Vue lorsque vous mettez à jour le modèle en AJAX succès fonction.
    2. Appeler le applyBIndings fonction sur chaque AJAX succès, mais fournir des paramètres supplémentaires à dire ce que l'élément à lier à.

    Plus probable que la première option est ce que vous cherchez. Supprimer l'appel de la $('#uploadModal').on appel et le placer sur le document de charge (si vous ne l'avez pas déjà).

    Pour voir ce que je veux dire, ici, de deux violons:

    1. Votre code actuel avec le message d'erreur que vous mentionnez.
    2. Remaniée en version qui n'ont pas l'erreur.

    Ce dernier essaie de rester aussi proche que possible de votre version initiale (afin de se concentrer sur le problème à portée de main), et remonte le long de ces lignes:

    function AlbumsListViewModel() {
    var self = this;
    self.availableAlbums = ko.observableArray([]);
}

var mainViewModel = new AlbumsListViewModel();
ko.applyBindings(mainViewModel);

$('#uploadModal').on('show.bs.modal', (function () {
    //Commenting things out to mock the ajax request (synchronously)
    var data = [{Title:'test'}];
    /*$.ajax({
        url: "../../api/eventapi/getalbums",
        type: "get",
        contentType: "application/json",
        async: false,
        success: function (data) {*/
            mainViewModel.availableAlbums.removeAll();
            var array = [];
            $.each(data, function (index, value) {
                array.push(value.Title);
            });
            mainViewModel.availableAlbums(array);
        /*}
    });*/
}));

    OriginalL'auteur Jeroen