Компонентная сетка виджетов

Question

Я пытаюсь использовать wijmogrid и привязать данные с помощью breezejs.

Я приложил свой код ниже для 4 файлов, которые у меня есть, индексной HTML-страницы и 3 файлов javascript.

Ul на странице индекса работает нормально и дает ожидаемые результаты, поэтому я знаю, что мои данные возвращаются.

Однако в поисковой сетке отображаются только заголовки 2 столбцов, но нет данных. Может кто-нибудь объяснить мне, что я не так в коде поисковой сетки.

Я пытаюсь изучить этот материал и использую пример кода BreezyDevices с сайта breezejs, чтобы использовать его в качестве основы для кода breezejs. Кажется, все работает, но я не могу понять часть привязки данных wijmo. Я действительно думаю, что мог бы использовать подобный код для ul и сделать foreach для результатов и построить таблицу, а затем превратить эту таблицу в wijmogrid, если бы мне пришлось.

*** index.cshtml start ***



<ul data-bind="foreach: resultBPP">
        <li class="results">

            <form>
                <label for="fn">Field 1: </label>
                <input id="fn" type="text" data-bind="value: Field1" placeholder="first" />
                <label for="ln">Field 2: </label>
                <input id="ln" type="text" data-bind="value: Field2" placeholder="last" />

                <br />
            </form>

        </li>
    </ul>

   <table id="searchGrid" data-bind="
    wijgrid: {
        data: resultBPP,
        allowSorting: true,
        columns: [
        {dataKey: 'Field1', sortDirection: 'ascending', headerText: 'Field 1', width: 60 },
        {dataKey: 'Field2', sortDirection: 'ascending', headerText: 'Field 2', width: 60}
        ]
    }">
</table>

<!--3rd party library scripts -->
    <script src="/Scripts/jquery-1.9.0.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.0.min.js"></script>
    <script src="/Scripts/knockout-2.2.1.js"></script>
    <script src="/Scripts/q.js"></script>
    <script src="/Scripts/breeze.debug.js"></script>

    <!-- wijmo CSS and scripts -->
    <link href="~/Content/themes/aristo/jquery-wijmo.css" rel="stylesheet" />
    <link href="~/Content/jquery.wijmo-complete.2.3.5.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.wijmo-open.all.2.3.5.min.js"></script>
    <script src="~/Scripts/jquery.wijmo-complete.all.2.3.5.js"></script>
    <script src="~/Scripts/knockout.wijmo.js"></script>



    <!-- Application scripts -->
    <script src="/Scripts/app/logger.js"></script>
    <script src="/Scripts/app/dataservice.js"></script>
    <script src="/Scripts/app/bppViewModel.js"></script>
    <script src="/Scripts/app/main.js"></script>

***end of index.cshtml****


*** main.js start ****

((function (root) {
    var app = root.app;
    app.logger.info('Data is booting');
    ko.applyBindings(app.bppViewModel);
})(window));

*** end of main.js ***


*** dataservice.js start ***

var searchTable = 'SearchResults';
(function (root) {
    var breeze = root.breeze;
    var app = root.app;
    var logger = app.logger;
    var serviceName = 'api/BPP';
    var manager = new breeze.EntityManager(serviceName);
    var dataservice = {
        getSearchResults: getSearchResults
    };
    app.dataservice = dataservice;
    function getSearchResults(searchArray) {
        logger.info("querying for search results");
        var query = new breeze.EntityQuery().from('searchTable').where('searchfield', 'substringof', '1').orderBy('searchfield').take(10);
        return manager.executeQuery(query).then(function (data) {
            processResults(data, searchArray);
        }).fail(queryFailed);
    }
    ; ;
    function processResults(data, searchArray) {
        logger.success("queried all results");
        searchArray.removeAll();
        var searchResults = data.results;
        searchResults.forEach(function (searchResult) {
            searchArray.push(searchResult);
        });
    }
    function queryFailed(error) {
        logger.error("Query failed: " + error.message);
    }
})(window);

*** end of dataservice.js ****

*** viewmodel.js start ***
((function (root) {
    var app = root.app;
    var dataservice = app.dataservice;
    var vm = {
        resultBPP: ko.observableArray([]),
        hide: ko.observable(true)
    };
    getSearchResults().then(function () {
        vm.hide(false);
    });
    app.bppViewModel = vm;
    function getSearchResults() {
        return dataservice.getSearchResults(vm.resultBPP);
    }
})(window));

*** end of viewmodel.js ***

Answer 1

На самом деле это была проблема в фабрике виджетов jQuery UI. Фабрика будет рекурсивно $.extend все объекты внутри объекта параметров. Поэтому при настройке параметров данных Grid для источника данных Breeze он будет проходить через всю модель данных и расширять каждый объект. Это вызвало переполнение стека в JS. Мы должны были на самом деле взломать нашу сетку, чтобы удалить параметр данных во время инициализации, а затем вернуть его обратно.

Поддержка breeze поставляется в Wijmo 3.0.0b3 (бета-версия 3), и вы можете прочитать больше здесь: http://wijmo.com/wijmo-v3-beta-3-has-landed/ Эта поддержка включает в себя гораздо больше, чем просто сетка исправить. У нас есть Data API и легкий адаптер для него. Таким образом, вы можете легко связать все наши виджеты с легким источником данных.