Question

我有以下内容将多个锚元素与“团队”类绑定为x可编辑的select2输入。每个a.team都有一个不同的数据源（传递给Web服务的ID不同，以便返回适用的团队列表），但不幸的是，一旦绑定了第一个a.team，就会使用该数据源URL对于页面上的所有后续a.team输入（因此，错误的团队列表将绑定到每个后续的x-editable select2输入）。

是否可以“重置”select2的data属性，以便它尊重每个a.team元素的每个数据源？还是其他任何解决方案？

$('a.team').editable({
    ajaxOptions: {
        dataType: 'json',
        type: 'POST'
    },
    emptytext: 'TBD',
    placement: 'bottom',
    success: function (response, newValue) {
        return editableResponse(response, newValue);
    },
    select2: {
        allowClear: true,
        placeholder: 'Select a team',
        width: '200px',
        id: function (item) {
            return item.id;
        },
        ajax: {
            dataType: 'json',
            results: function (data, page) {
                return { results: data };
            }
        },
    }
});

多个a.team锚点在页面上，如下所示：

  <a href="#" class="ur-team label label-inverse" data-type="select2" data-pk="@match.Id" data-source="@Url.Action("GetTeams", "Teams", new { scheduleId = match.ScheduleId })" data-value="@match.AwayTeamId" data-text="@match.AwayTeam" data-name="away" data-title="Update away team" data-url="@Url.Action("UpdateTeam", "AdminMatches")">@match.AwayTeam</a>

注意：我已经确认只有第一个x-editable select2输入中的ID用于所有其他select2 AJAX调用。换句话说，它不是数据缓存问题（它是“一旦绑定，所有其他数据源引用都被忽略”的问题）。

更新：这是一个复制问题的快速而肮脏的小提琴：http://jsfiddle.net/ovalsquare/k9b3d/8/。请注意，最终都绑定到list2而不是list，然后是list2。

Answer 1

不确定这是否是您已经考虑过的解决方法之一，或者这可能会如何影响应用程序的性能。但是，单独初始化每个.team元素都可以正常工作。

我将再研究一下，看看我是否能找到更好的方法，但这是目前的解决方案：

$('a.team').each(function(){
    $(this).editable({
        ajaxOptions: {
            dataType: 'json',
            type: 'POST'
        },
        emptytext: 'TBD',
        placement: 'bottom',
        success: function (response, newValue) {
            return editableResponse(response, newValue);
        },
        select2: {
            allowClear: true,
            placeholder: 'Select a team',
            width: '200px',
            id: function (item) {
                return item.id;
            },
            ajax: {
                dataType: 'json',
                results: function (data, page) {
                    return { results: data };
                }
            },
        }
    });
});

http://jsfiddle.net/trevordowdle/k9b3d/11/

更好的解决方法是在没有源数据属性的情况下初始化editable：

<a href="#" class="team" data-type="select2" data-pk="1" data-getSource="/list" data-value="100" data-text="Team A" data-name="home" data-title="Update home team" data-url="/post">Team A</a>

然后通过.team设置来源，在每个option初始化后添加它：

$('a.team').each(function(){
    $(this).editable('option','source',$(this).data('getSource'));
});

但不幸的是，当以这种方式设置source时它不起作用。我能找到的最佳解决方案是上面的那个。

在这里看起来有一些可编辑的错误：

初始化多个具有不同sources的精选可编辑内容时。并使用option方法设置来源。

具有不同动态加载列表的多个XEditable Select2元素：仅绑定第一个URL数据源

1 个答案: