我想使用wijmogrid並使用breezejs將其綁定。componentone wijmo grid breezejs
我附上了我的代碼,下面是我有的4個文件,索引html頁面和3個javascript文件。
索引頁面中的ul運行良好,並給我預期的結果,所以我知道我的數據正在返回。
但是,searchgrid只顯示2列標題,但沒有數據。有人可以向我解釋我在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" />
<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 ***
Ouch。我想和wijmo的人們聚在一起,消除皺紋。與這些控件無縫配合會很好。你介意把這個放在我們的用戶語音上嗎? – Ward 2013-02-12 04:33:54
我剛剛證實,將wijgrid綁定到BreezeDevices示例中的「people」observableArray會導致JS中的堆棧溢出異常。我還沒有看到這個問題與wijgrid綁定到KO observableArray之前,所以我不知道爲什麼會發生這種情況。我們現在正在調試這個問題。 p.s.我確實成功地將一個wijlist綁定到'people'數組。所以它是wijgrid特有的。 – Banzor 2013-02-12 15:35:02
wijgrid中的錯誤已被識別,並且會提供更新或鍛鍊建議。 – mike 2013-03-13 15:26:58