breeze - 如何在 Select2 4 中使用 Breeze？

Question

如何使用 Breeze 在Select2 jQuery 插件中加载远程数据？内置的 ajax 功能使用 jQuery，但文档指定您可以使用 ajax 属性来设置您自己的远程数据源。将轻风与 ajax 属性一起使用的最佳方式是什么？

Answer 1

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

我的解决方案利用数据函数来创建查询，将 Breeze 的 then 和 failure 函数连接到 select2 的成功和失败函数，并使用 Breeze 的take 和 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
                }
            };
        },
    }
});