使用 x-editable 更改 select2 的数据而不重新设置源选项

Question

如何在 x-editable 中更新选项值的来源 无需使用源重新初始化可编辑元素。

这里是沙盒：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：当我在字符串化的“源”上使用 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。如果我们在调用该函数时不提供第三个参数，则默认将 'value' 作为 idKey。当我们用于加载数组数据时，不应使用 'value' 作为 idKey。参考：http://ivaynberg.github.io/select2/#data_array.

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

我得到了想要的结果