不能将绑定多次应用于同一元素

Question

我有一个引导模式，每次它出现时，我都会使用 KO 绑定一个<select>下拉列表。

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

但是，在第二次显示时，KO会向我显示此错误：

错误：不能将绑定多次应用于同一元素。

Answer 1

错误消息说明了大部分内容。您有两种选择：

在
1. 页面加载时调用一次 applyBindings 函数。当您在 AJAX 成功函数中更新模型时，KO 将自动更新视图。
2. 在每个 AJAX 成功时调用 applyBIndings 函数，但提供其他参数以告知它要绑定到哪个元素。

很可能第一个选项就是您正在寻找的。从$('#uploadModal').on呼叫中删除呼叫，并将其置于文档加载时（如果尚未加载）。

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

您
1. 当前的代码包含您提到的错误。
2. 没有错误的重构版本。

后者试图尽可能接近您的初始版本（以便专注于手头的问题），并遵循以下思路：

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