Javascript 不能对同一元素多次应用绑定

我有一个引导模式，每次它出现时，我都会使用KO绑定一个

下拉列表

HTML:



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());
    }));

但是，在第二场演出中，KO将向我介绍以下错误：

错误：不能对同一元素多次应用绑定

错误消息显示了它的大部分内容。您有两个选择：

加载页面时，调用
applyBindings
函数一次。当您在AJAX成功函数中更新模型时，KO将自动更新视图
在每次AJAX成功时调用
applyBIndings
函数，但提供额外的参数来告诉它绑定到哪个元素
最有可能的第一个选择是你正在寻找的。从
$（'#uploadModal'）中删除调用。在
调用中，将其置于文档加载状态（如果尚未加载）

为了理解我的意思，这里有两个小提琴：

和你提到的错误
那没有错误
后者尝试尽可能接近您的初始版本（以便关注手头的问题），并遵循以下思路：

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);
        /*}
    });*/
}));