HotTowel 템플릿에서 KoGrid 사용

Question

HotTowel SPA 템플릿의 HTML보기에서 KoGrid를 사용하려고합니다. JS에서 모델 데이터

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

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

및 부가 : I 간단한 도면을 작성

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 파일이 올바르게 참조되고 있습니다.

도움 주셔서 감사합니다.

Answer 1

당신은 아마 이미이 문제를 생각해 냈을 것입니다. 그러나 오늘도 똑같은 문제에 직면했습니다. 크롬 검사관을 간략하게 살펴보면 koGrid 치수 특성이 올바르게 등록되지 않았으며 이로 인해 타이밍 문제가 있음을 알 수있었습니다. answered question relating to the same problem here을 찾았습니다.

나는이 해결책을 시도했지만 여전히 공을 멋지게 연출할 수있는 몇 가지 작업이 있습니다. 나는 어쨌든 모든 기능을 원하지 않기 때문에 koGrid를 놓치기로 결정했다.

Answer 2

문제의 핵심은 "KOGrid가 Durandal/HotTowel에서 바인딩을 수행 할 때 KOGrid 요소가 아직 포함되어 있지 않다는 것이다 DOM의 ". 뷰가 첨부 될 때까지 KOGrid가 바인딩을 수행하지 않도록해야합니다.

1) 뷰가 부착되었는지 여부에 대한 부울 값을 보유 뷰 모델에 새로운 관찰을 추가하지 durandal하여 :

isAttachedToView = ko.observable(false) 

및

에 노출 이것은 다음과 같이 달성 될 수있다

isAttachedToView: isAttachedToView 

2)까지 날짜 viewAttached 기능 콜백이 호출 될 때 진실한 :

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

3) HTML을 ko if 문으로 둘러 싸서 HTML의 비트가 평가되지 않도록합니다.

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

<!-- /ko --> 

4) isAttachedToView를 재설정보기

function deactivate() { 
    isAttachedToView(false); 
} 

을 비활성화에 허위로 그리고이 노출 : kogrid 뷰가 연결된 후까지)의 결합하지 않는

deactivate: deactivate