使用x可编辑更改select2的数据，而无需重新设置源选项

Question

如何在x可编辑的情况下保持选项值的源更新，而无需使用source重新初始化可编辑元素。

这是沙箱： http : //jsfiddle.net/wQysh/322/

HTML

   <p>X-editable (dev)</p>
    <div>
        <button id="controller">Add</button>
    </div>
    <div>
        <button id="controller1">Remove</button>
    </div>
    <div>
        <button id="controller2">Update</button>
    </div>
<div style="margin: 50px">
    <a href="#" id="username"></a>
</div>
<div style="margin: 50px">
    <a href="#" id="username2"></a>
</div>
<div style="margin: 50px">
    <a href="#" id="username3"></a>
</div>
<div style="margin: 50px">
    <a href="#" id="username4"></a>
</div>

JS：

$.fn.editable.defaults.mode = 'inline';

var count = 4, sources = [];

for(var i = 1; i <= count; i++){
    sources.push({ id : i, text : String(i) })
}

var getSource = function() {
    //i want this function must be called whenever available options is rendred. to ensure i used JSON.parse
    return JSON.parse(JSON.stringify(sources));
};


$('#controller2').click(function(e){
    count++;
    sources[2].text = String(count);
      //to verify live changes, if a new record updated in sources and used instantly
    $('#username').editable('setValue', [1, count]); $('#username2').editable('setValue', count);
});

$('#controller').click(function(e){
    count++;
    sources.push( {id : count, text :String(count) });  
      //to verify live changes, what if a new record added in sources and used instantly
    $('#username').editable('setValue', [1, count]); $('#username2').editable('setValue', count);
});

 $('#controller1').click(function(e){
    count++;
    var a = sources.pop();
     //to verify live changes by selecting value that is not present in the list. It should escape those, print the rest all if available in list
   $('#username').editable('setValue', [1, a.id]); $('#username2').editable('setValue', a.id);
});

$('#username').editable({  //to keep track of selected values in multi select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : [1,2],
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : true
    }
});

$('#username2').editable({  //to keep track of selected values in single select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : 2,
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : false
    }
});

$('#username3').editable({  //to keep track of available values in  multi select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : null,
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : true
    }
});

$('#username4').editable({  //to keep track of available values in single select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : null,
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : false
    }
});

//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!'; 
        } else {
           this.responseText = '';  
        }
    }
}); 

要求：

1. 每当我在源中添加新项目时，如果未选择该项目，则应在可用选项中对其进行更新；否则，如果选择了该项目，则视图应在元素处具有更新的值。
2. 每当我更新源中的项目时，如果未选择该项目，则应在可用选项中对其进行更新；否则，如果选择了该项目，则视图应在元素处具有更新的值。
3. 每当我删除源中的项目时，如果未选择该项目，则应将其从可用选项中删除；否则，如果该项目被选中，则视图应在元素处具有“无”值（如果是单选），其余元素的值（如果是多选）。

不允许：

1. 重新初始化小部件
2. 重新初始化源选项

我希望这是可能的。 但是努力取得结果。

EDIT2：当我在字符串化的“ sources”上使用JSON.parse时，代码无法正常工作。问题仍未解决。 新小提琴： http : //jsfiddle.net/wQysh/322/ （EDIT1误导了此问题，因此删除了EDIT1）

EDIT3：到目前为止，我已经能够实现此http://jsfiddle.net/wQysh/324/。这里的问题是先前选择的值未呈现，因此如果以前在多选中选择，则无法删除项目

EDIT4：尚未完全解决， http : //jsfiddle.net/wQysh/339/ 。 添加或更新后，可用选项不会更改，但设置该新记录后，提交后不会反映在html元素中。

Answer 1

答案是使用自定义显示功能

这是更新的小提琴。 http://jsfiddle.net/wQysh/357/

每当我们将“ setValue”设置为可编辑时，或在关闭事件时，都会调用可编辑的“显示”功能。

在显示功能中，此功能会检查现有值

$.fn.editableutils.itemsByValue

其中第三个参数接受idKey。 如果在调用此函数时未提供第三个参数，则默认情况下它将“值”作为idKey。 当我们用来加载数组数据时，不应使用'value'作为idKey。 参考： http : //ivaynberg.github.io/select2/#data_array 。

我添加了显示功能，其中第三个参数是“ id”。

我得到了预期的结果