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

【问题标题】：You cannot apply bindings multiple times to the same element您不能将绑定多次应用于同一元素
【发布时间】：2014-01-22 23:40:25
【问题描述】：

我有一个 Bootstrap modal，每次它出现时我都会使用 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 将向我显示此错误：

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

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

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

在页面加载时调用一次applyBindings 函数。当您在 AJAX 成功函数中更新模型时，KO 会自动更新 View。
在每次 AJAX 成功时调用 applyBIndings 函数，但提供额外的参数来告诉它要绑定到哪个元素。

第一个选项很可能就是您要查找的内容。从$('#uploadModal').on 调用中删除调用并将其置于文档加载（如果您尚未加载）。

要明白我的意思，这里有两个小提琴：

Your current code 你提到的错误。
Refactored version 没有错误。

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

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

【讨论】：