javascript - Pinterest 引脚无法加载

Question

我正在尝试创建一个板管理器，它按类别显示我关注的 pinterest 板(即:单击“食谱”，它只会显示食谱板中的图钉)。面板的链接位于一个 json 文件中，其中包含填充菜单的类别。

这是显示单个板及其引脚的代码。它采用参数 selectedPin，但我当前没有使用该参数，并将其替换为变量 selectedBoard 中的单个板以进行测试。我使用 get 方法来检索板对象，然后使用 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

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

您看到的问题是，当您加载 pinit.js 时，脚本会触发并在 DOM 中查找 data-pin-do 属性，但没有找不到任何东西，因为您稍后会异步添加它们。幸运的是，脚本公开了一个实用方法，您应该能够使用它来强制重建脚本。 PinUtils.build();。除了包含 pinit.js 之外，您无需执行任何操作，即可使用 PinUtils。

这是一个 fiddle ，向您展示应该做什么。 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();