Pinterest 图钉未加载

Question

我正在尝试创建一个图板管理器，按类别显示我关注的 pinterest 图板（即：单击 'Recipes'，它只会显示来自食谱图板的图钉）。板的链接位于 json 文件中，其中包含填充菜单的类别。

这是显示单个电路板及其引脚的代码。它采用参数 selectedPin，但我目前没有使用它，并用变量 selectedBoard 中的单个板替换它以用于测试目的。我使用 get 方法检索 boards 对象，然后使用 for 循环运行通过它并找到单个 pin 的 url。所有这些都有效，因为我已经注销了该对象，但是当我尝试将 pin 插入 HTML 时，它不会显示。奇怪的是，当我检查页面时，您可以看到该元素已添加到 HTML 代码中，但实际上没有显示任何内容。我曾尝试异步加载 API，并尝试在本地托管它。

category 和 right 是我想要显示图钉的 div。

https://developers.pinterest.com/docs/sdks/js/

  function displayBoard(selectedPin) {
      categoryBody.appendChild(category);

      for (var cat in board.board) {
      if (board.board[cat].category === selectedPin.title) {
        console.log(board.board[cat].url, selectedPin.title);

      for (var i = 0; i < board.board[cat].url.length; i++) {
          category.appendChild(right);
          var selectedBoard = "https://api.pinterest.com/v1/boards/mojettegiraud/concepts/pins/?access_token=ACCESS-TOKEN&fields=id%2Clink%2Cnote%2Curl%2Ccreated_at%2Cimage";
          $.get(selectedBoard).done(function(data){
            for (var x = 0; x < data.data.length; x++) {
              console.log(data.data[x].image.original.url, data.data[x].created_at);
              var pinner = "<a data-pin-do='embedPin' href='"+data.data[x].url+"'></a>";
              right.innerHTML = pinner;
        }
        });
    }
    }
  }

}

Answer 1

应该很容易解决。但首先，您可能想从代码片段中删除令牌 :)

您遇到的问题是，当您加载 pinit.js 时，脚本会触发并在 DOM 中查找 data-pin-do 属性，但找不到任何属性，因为您添加了他们稍后异步。幸运的是，脚本公开了一个实用方法，您应该能够使用它来强制重建脚本。 PinUtils.build();。除了包含 pinit.js 之外，您不需要做任何其他事情，您将可以使用 PinUtils。

这里 fiddle 向您展示了您应该做什么。 JSFiddle

Pinterest 图钉未加载

Pinterest pins do not load

javascript

pinterest