Question

[
  {
    "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]时，popover将显示“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”。在第二个屏幕截图中如果我鼠标悬停得到“abc”值。但“def”和“ghi”值根本没有显示。我不明白这是什么问题:(。

enter image description here

我还需要提供“def”和“ghi”值。但我觉得我的逻辑有些不对劲。提前致谢。这对我来说真的是一个罕见的问题，也可能是其他人。

如果我使用id insted的类是屏幕截图:( enter image description here

Answer 1

你需要在这里改变两件事。首先，是使用class来定义popover而不是id。第二个是将每个<li>抽象到自己的视图中。目前，您有一个循环遍历整个集合的视图。您的所有活动目前都与此视图相关联。做我提到的那些事情应该解决这个问题。

你可以做这样的事情让它成为自己的视图，它带有它自己的子元素。刚刚写了这个并没有测试，但这个想法是这样的。我不确定你使用的是哪个popover库，但这个想法通常都是一样的。

编辑：没有意识到你在使用Mustache / Handlebars，所以这里是JS Fiddle。 Code

Answer 2

现在，如果您尝试调用每个对象，它应该可以正常工作。

 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());

Popover不适用于json多个值

2 个答案: