0

HotTowel SPA テンプレート内の HTML ビューで 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 ファイルは正しく参照されています。

助けてくれてありがとう。

4

2 に答える 2

1

問題の核心は、「KOGrid が Durandal/HotTowel でバインディングを行うとき、KOGrid 要素はまだ DOM の一部ではない」ということです。ビューがアタッチされるまで、KOGrid がバインディングを行わないようにする必要があります。これは次のようにして実現できます。

1) 新しいオブザーバブルをビューモデルに追加して、デュランダルによってビューがアタッチされているかどうかのブール値を保持します。

isAttachedToView = ko.observable(false)

そして暴露する

isAttachedToView: isAttachedToView

2) viewAttached 関数コールバックが呼び出されたときに true になるように更新します。

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

3) HTML を ko if ステートメントで囲み、ビューがアタッチされるまで HTML の一部が評価されないようにします (つまり、kogrid はバインディングを行いません)。

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

<!-- /ko -->

4) ビューの非アクティブ化時に isAttachedToView を false にリセットする

function deactivate() {
    isAttachedToView(false);
}

そしてこれを公開します：

deactivate: deactivate
于 2013-06-28T12:14:29.983 に答える
0

あなたはおそらくすでにこれを理解していますが、今日も同じ問題に直面していました. chrome インスペクタをざっと見てみると、koGrid ディメンション プロパティが正しく登録されていないことがわかりました。これは、タイミングの問題であることがわかります。ここで同じ問題に関連する回答済みの質問を見つけました。

私はこの解決策を試しましたが、ボールをうまくプレーさせるためにまだやるべきことがいくつかあります. とにかく、すべての機能が本当に必要なわけではないので、koGridにミスを与えることにしましたz :)

于 2013-06-04T06:29:56.860 に答える