knockout.js - componentone Wijmo グリッド Breezejs

Question

wijmogr​​id を使用して、breezejs を使用してデータバインドしようとしています。

私が持っている 4 つのファイル、index html ページ、および 3 つの javascript ファイルのコードを以下に添付しました。

インデックス ページの ul は正常に実行され、期待どおりの結果が得られるので、データが返されていることがわかります。

ただし、検索グリッドには 2 列のヘッダーのみが表示され、データは表示されません。searchgrid コードで何が間違っているかを誰かに説明してもらえますか。

私はこのことを学ぼうとしており、breezyjs Web サイトの BreezyDevices サンプル コードを使用して、breezejs コードの基礎として使用しています。すべてが機能しているように見えますが、wijmo のデータバインディング部分がわかりません。ul と同様のコードを使用し、結果に対して foreach を実行してテーブルを作成し、必要に応じてそのテーブルを wijmogr​​id に変換できると思います。

*** 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 ***