2

我有一个项目，我正在使用 BreezeJS 从我的网络服务器获取数据。我将 AngularJS 与 ui-select2 模块一起使用。目前，我有它，当我加载我的页面时，breezejs 会调用以获取我转储到范围变量中的数据。从那里，select2 可以轻松地引用它并相应地构建。

如果我想 ajaxify 事情，它会变得非常棘手。我希望能够使用 select2 的 ajax 或查询支持，但我不想使用它来获取数据，而是想使用微风js 来做。因此，在页面加载期间，直到我开始输入 X 最小字符之前，什么都不会加载，然后再进行 ajax 获取。

约束：我不想使用 select2 的“ajax”来获取数据。我希望 BreezeJS 处理服务调用。当我使用 ajax 时，每次我按下一个字符时都会调用一个 ajax 来过滤结果（类似于自动完成）。我只希望列表加载一次，然后使用本机过滤。

这是我到目前为止所拥有的：

微风js-StateContext.JS

m.app.factory('StateContext', ['$http', function ($http) {
    configureBreeze();

    var dataService = new breeze.DataService({
        serviceName: "/Map/api",
        hasServerMetadata: false
    });

    var manager = new breeze.EntityManager({ dataService: dataService});

    var datacontext = {
        getAllStates: getAllStates
    };
    return datacontext;


    function getAllStates() {
        var query = breeze.EntityQuery
                .from("States");
        return manager.executeQuery(query);
    }


    function configureBreeze() {
        breeze.config.initializeAdapterInstances({ dataService: "webApi" });
    }
}]);

这可以正常工作并正确返回我的 json 对象。

这是我调用服务的方式：

m.app.controller('LocationCtrl', ['$scope', 'StateContext', function ($scope, StateContext) {

    $scope.getAllStates = function () {
        StateContext.getAllStates().then(stateQuerySucceeded).fail(queryFailed);
    }
    $scope.getAllStates();


    $scope.states = [];
    function stateQuerySucceeded(data) {
        data.results.forEach(function (item) {
            $scope.states.push(item);
        });
        $scope.$apply();

        console.log("Fetched States");
    }

    function queryFailed(error) {
        console.log("Query failed");
    }

    $scope.select2StateOptions = {
        placeholder: "Choose a State",
        allowClear: true,
        minimumInputLength: 2
    };
}

这是我的html：

<div ng-app="m" id="ng-app">
    ...
    ...

    <select ui-select2="select2StateOptions" ng-model="LocationModel.State">
        <option value=""></option>
        <option ng-repeat="state in states" value="{{state.id}}">{{state.name}}</option>
    </select>
</div>

目前，当页面加载时，html select2 控件会加载。但我想拥有它，所以当我输入超过 2 个字符时，我将能够调用 $scope.getAllStates(); 作为ajax调用。在为 webapi 配置 BreezeAdapter 时，BreezeJS 已经在本地使用 ajax。

我正在考虑使用 select2 的 ajax 或查询调用.. 但我宁愿使用微风来获取数据，因为它使查询可扩展，并且我不想违反我的设计模式，或者使代码更难维护，并且我不希望每次在文本框中输入新字符时都进行 ajax 调用，我只希望它发生一次。

关闭尝试：

将我的html更改为：

<!-- Select2 needs to make this type="hidden" to use query or ajax, then it applies the UI skin afterwards -->
<input type="hidden" ui-select2="select2StateOptions" ng-model="LocationModel.State" /><br />

在我的控制器中，更改 select2StateOptions：

$scope.select2StateOptions = {
    placeholder: "Choose a State",
    allowClear: true,
    minimumInputLength: 2,
    query: function (query) {
        debugger;
        var data = StateContext.getAllStates().then(stateQuerySucceeded).fail(queryFailed);
    }
};

这就是问题所在。BreezeJS 使用一个 Q 库，它使用了一个叫做“promise”的东西；这是一个承诺，即在进行 ajax 调用后将返回数据。问题在于，查询函数期望填充数据，但是在从查询函数返回之后调用“stateQuerySucceeded”函数的承诺。

所以它首先点击查询功能。然后点击 getAllStates()。从查询返回（未填充任何内容），然后调用“stateQuerySucceeded”。

换句话说，即使我已经能够获取数据，但这样做为时已晚.. select2 的查询功能没有在正确的时间接收数据，并且我的 html 选择挂在带有搜索微调器的“正在搜索...” .gif。

4

1 回答 1

3

我真的不知道这个angular-ui-select2 control。我认为文档的相关部分是这个例子：

$("#e5").select2({
    minimumInputLength: 2,
    query: function (query) {
       var data = {results: []}, i, j, s;
        // simulate getting data from the server
        for (i = 1; i < 5; i++) {
            s = "";
            for (j = 0; j < i; j++) {s = s + query.term;}
            data.results.push({id: query.term + i, text: s});
        }
        query.callback(data);
    }
});

我将撇开这样一个事实，即您似乎对使用用户在查询中输入的两个或多个字符不感兴趣（也许您只是忽略了它）。我将继续进行在我看来是无稽之谈的事情，即在用户键入任何两个字母后获取所有状态。

我认为您缺少的是query.callback当数据到达时告诉“angular-ui-select2”的作用。我猜你想调用query.callback你的成功函数。

$scope.select2StateOptions = {
    placeholder: "Choose a State",
    allowClear: true,
    minimumInputLength: 2,
    query: function (query) {
        StateContext.getAllStates()
                    .then(querySucceeded).catch(queryFailed);

       function querySucceeded(response) {
            // give the {results:data-array} to the query callback
            query.callback(response);
       }

       function queryFailed(error) {
           // I don't know what you're supposed to do.
           // maybe return nothing in the query callback?
           // Tell the user SOMETHING and then
           query.callback({results:[]});      
       }
    }
};

正如我所说，我只是根据对文档的快速阅读进行猜测。将此答案视为“提示”，请不要指望我会坚持并使其真正起作用。

于 2014-02-07T08:09:30.623 回答