Pinterest引脚不加载

Question

我正在尝试创建一个电路板管理器，按类别显示我遵循的pinterest电路板（IE：点击＆＃39; Recipes＆＃39;它只显示配方板上的引脚）。指向电路板的链接位于一个json文件中，其中包含填充菜单的类别。

以下是显示单个电路板及其引脚的代码。它使用参数selectedPin，但我目前没有使用它，并将其替换为变量selectedBoard中的单个板以用于测试目的。我使用get方法检索board对象，然后使用for循环遍历它并找到单个pin的url。所有这一切都有效，因为我已经注销了该对象，但是当我尝试将该引脚插入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。

这是一个小提示，告诉你应该做什么。 JSFiddle

相关片段就是这篇文章。

var boards = Array.prototype.slice.call(arguments);
$.each(boards, function(i, pins) {
  $.each(pins, function(i, pin) {
    var pinHTML = "<a data-pin-do='embedPin' href='"+pin.url+"'></a>";
    document.body.innerHTML += pinHTML;
  })
});
PinUtils.build();