2 
[
  {
    "id"  : 1,
    "name"  : "clevin",
    "description" : "Version 1 : some desc",
    "info" : [{
      "id"  : 2,
      "name"  : "abc",
      "size"  : "5 GB",
      "used"  : "25%"

    },
    {
      "id"  : 3,
      "name"  : "def",
      "size"  : "10 GB",
      "used"  : "15%"
    },
    {
      "id"  : 4,
      "name"  : "ghi",
      "size"  : "20 GB",
      "used"  : "5%"
    }],

  }]

これは私のjsonファイルです。「info.name」[abc, def, ghi] にマウスを合わせると、ポップオーバーに「name」、「size」、「used」が表示されます。

しかし、私の問題は、「abc」が最初の値であることです。マウスオーバーすると、期待どおりに値が表示されます。しかし、「def」と「ghi」をマウスオーバーしても何も起こりません:(。

<ul type="none">
            <li>
                <label id="vol-label" class="muted">Info :</label>
                {{#info}}
                <span id="value"><a><u>{{name}}</u></a></span>
                <span id="info-popover-title" class="hide">{{name}}</span>
                <div id="info-popover-content" class="hide">
                    <p>Size : {{size}}</p> <p> Used : {{used}}</p><p> Status : {{status}}</p>
                </div>
                {{/info}}
            </li>
</ul>

これは私のテンプレート（口ひげ）です。以下は私のビュー部分です(backbone.js)

   events: {
              "mouseenter #value" :   "showDetails", 

              "mouseleave #value" :   "hideDetails" ,
            },

    showDetails : function() {

                this.$("#value").popover({

                    html : true,

                    title: function() {

                         return $("#info-popover-title").html();

                    },

                    content: function() {

                      return $("#info-popover-content").html();

                    }
                });    

                this.$("#value").popover('show');        
            },

            hideDetails : function() {

                this.$("#value").popover('hide');   

            },

問題を理解するには、両方のスクリーン ショットを参照してください。最初の画面では、すべての json 情報値 "abc" "def" および "ghi" を取得しています。2 番目のスクリーン ショットで、マウス オーバーすると「abc」値が取得されます。しかし、「def」と「ghi」の値はまったく表示されません。問題が何であるかわかりません:(。

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

「def」と「ghi」の値もポップする必要があります。しかし、私の論理では何かが間違っていると思います。前もって感謝します。これは私にとって本当にまれな問題であり、他の問題でもある可能性があります。

私がIDのinstedクラスを使用する場合、スクリーンショットは次のとおりです:( ここに画像の説明を入力

4

2 に答える 2

1

ここで変更する必要がある 2 つのこと。まず、id の代わりにクラスを使用してポップオーバーを定義します。<li>2 つ目は、それぞれを独自のビューに抽象化することです。現在、コレクション全体をループする 1 つのビューがあります。現在、すべてのイベントがこの 1 つのビューに関連付けられています。私が言及したことを行うことで、この問題は解決するはずです。

このようなことを行うと、独自のサブ要素を持つ独自のビューになることができます。これを簡単に書いただけでテストはしていませんが、アイデアは次のようなものです。どのポップオーバー ライブラリを使用しているかはよくわかりませんが、考え方はほぼ同じです。

編集:口ひげ/ハンドルバーを使用していることに気付かなかったので、JS Fiddle を次に示します。コード

于 2013-01-20T09:29:26.713 に答える
0

各オブジェクトを呼び出そうとすると、うまくいくはずです。

 var abc =
 {
     "id"  : 1,
"name"  : "clevin",
"description" : "Version 1 : some desc",
"info" : {
  "id"  : 2,
  "name"  : "abc",
  "size"  : "5 GB",
  "used"  : "25%"
}
 };

 var def = 
 {
     "id"  : 3,
  "name"  : "def",
  "size"  : "10 GB",
  "used"  : "15%"
};
var ghi = {
  "id"  : 4,
  "name"  : "ghi",
  "size"  : "20 GB",
  "used"  : "5%"
};

var output = 
{
    show : function()
    {
        return abc["info"];
    }
};

console.log(output.show());
于 2013-01-20T08:06:12.743 に答える