2013-03-07 26 views
0

我想在HotTowel SPA模板內的HTML視圖中使用KoGrid。我創建了一個簡單的視圖:在HotTowel模板中使用KoGrid

<section> 
    <h2 class="page-title" data-bind="text: title"></h2> 

    <div class="gridStyle" data-bind="koGrid: gridOptions"></div> 
</section> 

並加入在JS模型數據:}

define(['services/logger'], function (logger) { 
var vm = { 
    activate: activate, 
    title: 'My Grid' 
}; 

return vm; 

//#region Internal Methods 
function activate() { 
    var self = this; 
    this.myData = ko.observableArray([{ name: "Moroni", age: 50 }, 
             { name: "Tiancum", age: 43 }, 
             { name: "Jacob", age: 27 }, 
             { name: "Nephi", age: 29 }, 
             { name: "Enos", age: 34 }]); 
    this.gridOptions = { data: self.myData }; 
    return true; 
} 
//#endregion 

);

網格在頁面上,但樣式似乎是渲染寬度和位置完全錯誤,所以列在彼此之上,大多數數據不明顯正確。 KoGrid.css文件被正確引用。

感謝您的任何幫助。

+0

你有沒有使用帶有Durandal模板的koGrid成功了嗎?到目前爲止,我們嘗試沒有幸運 – Bronzato 2013-03-28 11:27:20

回答

0

你可能已經想出了這一個,但今天也面臨同樣的問題。快速瀏覽鉻檢查員告訴我,koGrid尺寸屬性沒有正確註冊,這告訴我它的時間問題。我發現一個answered question relating to the same problem here

我確實嘗試過這個解決方案,但仍然有一些工作要做,以便使它很好地發揮球。我決定給koGrid一個小姐,因爲我真的不想要它的所有功能anywayz :)

1

問題的核心是「當KOGrid在Durandal/HotTowel中綁定時,KOGrid元素還沒有完成的DOM「。您需要確保KOGrid在附加視圖之後才能進行綁定。這可以如下實現:

1)添加新的可觀察到的視圖模型以保持一個布爾值的視圖是否已被附接或不通過迪朗達爾:

isAttachedToView = ko.observable(false) 

並將其公開

isAttachedToView: isAttachedToView 

2)截至日期時viewAttached回調函數被調用這是真的:

function viewAttached() { 
    isAttachedToView(true); 
    return true; 
} 

3)用一個ko if語句包圍你的HTML,以確保不會評估一點HTML(即, kogrid沒有做它的結合),直到視圖附後:

<!-- ko if: isAttachedToView() --> 
    <div data-bind="koGrid: { data: ... 

<!-- /ko --> 

4)復位isAttachedToView是在停用視圖

function deactivate() { 
    isAttachedToView(false); 
} 

虛假和揭露這個:

deactivate: deactivate