2013-02-11 68 views
0

我想使用wijmogr​​id並使用breezejs將其綁定。componentone wijmo grid breezejs

我附上了我的代碼,下面是我有的4個文件,索引html頁面和3個javascript文件。

索引頁面中的ul運行良好,並給我預期的結果,所以我知道我的數據正在返回。

但是,searchgrid只顯示2列標題,但沒有數據。有人可以向我解釋我在searchgrid代碼中出了什麼問題。

我想學習這些東西,並一直使用Breezejs網站的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 *** 
+0

Ouch。我想和wijmo的人們聚在一起,消除皺紋。與這些控件無縫配合會很好。你介意把這個放在我們的用戶語音上嗎? – Ward 2013-02-12 04:33:54

+0

我剛剛證實,將wijgrid綁定到BreezeDevices示例中的「people」observableArray會導致JS中的堆棧溢出異常。我還沒有看到這個問題與wijgrid綁定到KO observableArray之前,所以我不知道爲什麼會發生這種情況。我們現在正在調試這個問題。 p.s.我確實成功地將一個wijlist綁定到'people'數組。所以它是wijgrid特有的。 – Banzor 2013-02-12 15:35:02

+0

wijgrid中的錯誤已被識別,並且會提供更新或鍛鍊建議。 – mike 2013-03-13 15:26:58

回答

1

這實際上是jQuery UI小部件工廠中的一個問題。工廠將以遞歸方式$ .extend選項對象內的所有對象。因此,當將網格的數據選項設置爲Breeze數據源時,它將遍歷整個數據模型並擴展每個對象。這導致JS中的堆棧溢出。我們必須在初始化過程中真正破解我們的網格以刪除數據選項,然後將其重新放入。

對微風的支持已在Wijmo 3.0.0b3(Beta 3)中發佈,您可以在這裏閱讀更多信息:http://wijmo.com/wijmo-v3-beta-3-has-landed/此支持包含的不僅僅是網格修復。我們有一個Data API和一個微風適配器。因此,您可以輕鬆地將我們的所有小部件綁定到微風數據源。