Popover 不适用于 json 多个值答案

【问题标题】：Popover is not working for json multiple valuesPopover 不适用于 json 多个值
【发布时间】：2013-01-20 06:38:48
【问题描述】：

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

我还需要弹出“def”和“ghi”值。但我认为我的逻辑有问题。提前致谢。这对我来说真的是一个罕见的问题，可能其他人也是。

如果我使用 id 的类 insted 以下是屏幕截图:(

【问题讨论】：

问题是id 应该是唯一的，而您违反了该规则。你所有的id都应该改成class。
对多个值尝试使用 class 而不是 id。
如果我使用类“它会显示一些奇怪的东西我现在附上屏幕截图:)
哦，如果你使用类，你会得到同样的弹出框 3 次，奇怪。一些逻辑错误
@nhahtdh: 现在看起来更复杂了:(

标签： json backbone.js twitter-bootstrap mustache

【解决方案1】：

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

你可以做这样的事情来拥有它自己的视图，它带有它自己的子元素。只是快速写了这个，还没有测试，但这个想法是这样的。我不太确定您使用的是哪个弹出框库，但想法大致相同。

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

【讨论】：

如果您提供的任何示例对我和其他人有很大帮助。
我已经编辑了我的回复以提供我的建议的原型。
这很棒 :) 我正在使用 bootstarp。

【解决方案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());

【讨论】：