我正在尝试使用wijmogrid并使用breezejs对其进行数据绑定。
我在下面附上了我的代码，用于我拥有的 4 个文件、索引 html 页面和 3 个 javascript 文件。
索引页面中的 ul 运行良好并给了我预期的结果，所以我知道我的数据正在被返回。
然而，searchgrid 只显示 2 个列标题，但没有数据。有人可以向我解释我在 searchgrid 代码中的错误。
我正在尝试学习这些东西，并且一直在使用来自轻柔网站的 BreezyDevices 示例代码作为轻柔代码的基础。这一切似乎都在工作，但我无法弄清楚 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 ***