5

いくつかのサンプルをチェックアウトしましたが、私がやろうとしているものとまったく同じものはありません.

私が持っているものはほとんどうまくいきますが、うまくいきません。

これは、問題を説明するためのフィドルです。

http://jsfiddle.net/5yA6G/4/

上のセットは問題なく動作しますが、静的に定義されていることに注意してください。

一番下のセット (トム、スティーブ、ボブ) は基本的に「機能」しますが、ヘッダー要素は、折りたたみ可能なヘッダーと折りたたみ可能な非表示の部分の両方で終了します。

何か間違ったことをしているに違いないようですが、何が原因なのかわかりません。

何か案は？

4

2 に答える 2

6

参考までに、そしてこの問題に遭遇した他の人にとっては、後から考えると少なくともある程度明白であることがわかります。

Knockoutに組み込まれている「匿名」テンプレートは多くの場合うまく機能しますが、JQMobileを使用すると、少し風変わりなものになる可能性があります。

これは、他のすべてのコンテンツと同様に、ページの読み込み時にJQMobileが匿名テンプレートのコンテンツを調整するためです。

その後、ノックアウトのApplyBindings関数を使用すると、ノックアウトは適切な要素を必要に応じて追加します。多くの投稿と回答が示唆しているように、次に、このようなものを介して、新しく作成された要素に対してcollaspible（）を呼び出す必要があります。

$("div[data-role='collapsible']").collapsible({refresh: true});

問題ありません。ただし、JQMがすでにフォーマットを適用している場合、匿名テンプレートはすでにJQMによって「レンダリング」されているため、折りたたみ可能を呼び出して再度レンダリングすると、見出しの二重化、折りたたみ可能のネストなど、あらゆる種類のファンキーな結果が発生します。

私にとっての解決策は、Knockoutの「名前付きテンプレート」機能を使用し、テンプレートを配置して、次のように折りたたみ可能な要素をタグにレンダリングすることでした。

<script type="text/html" id="alarm-template">
    <div data-role="collapsible" data-collapsed="true" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-enhance="false">
        <h3 data-bind="text:name"></h3>
        <p>The content here</p>
        <p data-bind="text: name"></p>
    </div>
</script>

これを行うと、ページの読み込み時にJQMがテンプレート要素を「レンダリング」できないため、実際に生成されたときに適切にレンダリングされます。

編集：上記は折りたたみ可能なセットに含まれていない折りたたみ可能なものには問題なく機能しますが、セットに含まれている場合、要素のスタイル（特に、セットに属していることを示すための角の丸め）は機能しません。正しく動作します。

私の知る限り、2つの問題があります。

1つ目は、「作成」をトリガーするだけでは、セット内のすべての折りたたみ可能なスタイルのスタイルが実際には更新されないということです。それをするためにあなたはしなければなりません...

$("div[data-role='collapsible-set']").collapsibleset('refresh');

しかし、もっと悪い問題があります。JQMは、セットの最後のアイテムを「最後のアイテム」として「マーク」します。次に、その事実を使用して、最後のアイテムが展開/折りたたまれているときにスタイルを設定する方法を決定します。

Knockoutは実際にはセット全体を（速度のために）再構築しないため、refreshメソッドを呼び出すたびに、JQMは最後のアイテムを「最後」として忠実にマークしますが、前のアイテムのマークを削除することはありません。その結果、空のリストから開始すると、すべてのアイテムに「最後」のマークが付けられ、このためにスタイリングが失敗します。

githubの問題レポートでその修正について詳しく説明しました。

https://github.com/jquery/jquery-mobile/issues/4645

于 2012-07-04T01:37:40.123 に答える
4

私は実際にこれを行うためのはるかに簡単な方法を見つけました：

  1. foreach バインディングを通常どおりに設定すると、次のようになります

    <div data-bind="foreach: promotions">

    <h3 data-bind="text: Title"></h3>
        <p>Creator:<span data-bind="text: Creator"></span></p> 
        <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
        <span data-bind="text: Description"></span>
        <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>

  2. それを class="collapsible のように div でラップします

    <div data-role="collapsible-set" data-bind="foreach: promotions">

<div class="collapsible">
    <h3 data-bind="text: Title"></h3>
        <p>Creator:<span data-bind="text: Creator"></span></p> 
        <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
        <span data-bind="text: Description"></span>
        <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>

  3. 次のようにバインディングを行った後、jquery mobile を介して折りたたみ可能なウィジェットを適用します。

    $(document).ready(function () {
    ko.mapping.fromJS(data, dataMappingOptions, PromotionViewModel.promotions);
    ko.applyBindings(PromotionViewModel);
    $('.collapsible').collapsible();
});

  4. 折りたたみ可能なセットの場合、 foreach div に class="collapsible-set" を設定するだけで同じアイデアを適用できます。お役に立てれば

于 2012-12-11T17:21:45.543 に答える