如何在 Select2 4 中使用 Breeze？

Question

如何使用 Breeze 在Select2 jQuery plugin 中加载远程数据？ built in ajax functionality uses jQuery 但文档 specifies that you can use the ajax property to setup your own remote data sources。将轻风与 ajax 属性一起使用的最佳方式是什么？

Answer 1

我想出了一个我认为很好的解决方案。此示例将针对 Breeze 的 Todo 示例中的 Todo Server（例如 Todo-Angular Sample）运行。

我的解决方案利用数据函数创建查询，将 Breeze 的 then 和 failure 函数连接到 select2 的成功和失败函数，并使用 Breeze 的take and skip 具有完整的分页功能。

//Setting for the number of items to get per request
var numberPerPage = 10;

jQuery('select').select2({
    //Custom ajax method that uses breeze to get the results
    ajax: {
        transport: function (params, success, failure) {
            manager.executeQuery(params.data).then(function (data) {
                success(data.results);
            }).fail(function (data) {
                failure();
            });
            return { abort: function () { } };//Return a dummy abort function since select2 requires one but Breeze doesn't have that functionality
        },
        data: function (params) {
            var query = {
                from: 'Todos',
                orderBy: ['Description'],
                where: {
                    or: [
                        { 'Description': { 'Contains': params.term } },
                    ]
                },
                take: numberPerPage,
                skip: (numberPerPage * ((params.page || 1) - 1))
            };
            return new breeze.EntityQuery(query);//Return a Breeze query as the data, which we'll request in the transport
        },
        processResults: function (data, params) {
            return {
                //Convert the returned objects into select2 friendly objects
                results: jQuery.map(data, function (val) {
                    return {
                        id: this.Id,
                        text: this.Description
                    };
                }),
                pagination: {//Must return this to get paging to work
                    more: data.length == numberPerPage//If the data returned a total page, we should try again for more
                }
            };
        },
    }
});