如何使用KendoUI在多选中获取更改的元素？

Question

我有一个多选列表,作为标签列表的持有者.我似乎无法弄清楚如何正确获取正在更改的项目的值并与更改的事件一起传递.这是我的剑道多选:

        @(Html.Kendo().MultiSelect()
          .Name("tags")
          .Placeholder("No tags selected for this unit")
          .BindTo(new SelectList(Model.TagsAvailable))
          .Events(e => e
                    .Select("select")
                    .Change("change"))
          .Value(Model.TagsSelected.ToArray())
          )

这是我的js方法:

        function select(e) {
            var dataItem = this.dataSource.view()[e.item.index()];
            var param = dataItem.Text;
            var url = '/UnitDetails/TagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

        function change(e) {
            var dataItem = this;
            var param = dataItem.element.context.innerText;
            var url = '/UnitDetails/UnTagUnit/@Model.UnitId';

            $.ajax({
                url: url,
                data: { selectedItem: param },
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // ...
                },
                error: function () {
                    // ...
                }
            });
        };

我的问题是,我觉得param的分配只是快速而肮脏.当然,还有其他一些更正确的方法吗？

Answer 1

了解变化并没有简单的方法(afaik).所以,让我们自己做吧.

首先,我将使用以下函数保存旧值.

function saveCurrent(multi) {
    multi._savedOld = multi.value().slice(0);
}

multi我们传递给函数的多选择在哪里作为参数(因此您可以将函数用于多个multiselects).

然后,您需要实现change如下:

change    : function (e) {
    // Retrieve previous value of `multiselect` saved using previous function
    var previous = this._savedOld;
    // These are current values.
    var current = this.value();
    // Let's save it for the next time
    saveCurrent(this);

    // The difference between previous and current are removed elements
    var diff = $(previous).not(current).get();
    console.log("removed", diff);

    // The difference between current and previous, are added elements
    diff = $(current).not(previous).get();
    console.log("added", diff);
}

在这里运行示例http://jsfiddle.net/OnaBai/MapVN/