我正在尝试使用wijmogrid并使用breezejs对其进行数据绑定 .
我已将下面的代码附加到我拥有的4个文件,索引html页面和3个javascript文件中 .
索引页面中的ul运行正常,并给我预期的结果,所以我知道我的数据正在返回 .
但是,searchgrid仅显示2列 Headers 但没有数据 . 有人可以向我解释我在searchgrid代码中有什么问题 .
我正在尝试学习这些东西,并且一直在使用breezejs网站上的BreezyDevices示例代码作为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" />
</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 ***
1 回答
这实际上是jQuery UI的widget工厂中的一个问题 . 工厂将递归$ .extend选项对象内的所有对象 . 因此,当将Grid的数据选项设置为Breeze数据源时,它将遍历其整个数据模型并扩展每个对象 . 这导致JS中的堆栈溢出 . 我们必须实际破解我们的网格以在init期间删除数据选项,然后将其重新放入 .
Wijmo 3.0.0b3(Beta 3)中已经提供了对breeze的支持,您可以在这里阅读更多内容:http://wijmo.com/wijmo-v3-beta-3-has-landed/此支持不仅包括网格修复 . 我们有一个Data API和一个微风适配器 . 因此,您可以轻松地将所有小部件绑定到轻微的数据源 .