获取基于Board的卡列表 - Trello API

Question

我试图根据用户从下拉选择菜单中选择的板返回一张卡片列表.

演示 http://jsfiddle.net/nNesx/1378/

我创建了以下板块列表

var $boards = $("<select>")
        .text("Loading Boards...")
        .appendTo("#output");

    // Output a list of all of the boards that the member 
    // is assigned to
    Trello.get("members/me/boards", function(boards) {
        $boards.empty();
        $.each(boards, function(ix, board) {
            $("<option>")
            .attr({href: board.url, target: "trello"})
            .addClass("board")
            .text(board.name)
            .appendTo($boards);
        });  
    });

这给了我所有可用板的下拉选择.

一旦用户选择了电路板,我就希望他们看到该电路板的卡片.我正在使用此代码用于卡片,但所有卡片都会出现.

var $cards = $("<div>")
        .text("Loading Boards...")
        .appendTo("#outputCards");

    // Output a list of all of the boards that the member 
    // is assigned to based on what they choose in select dropdown
    Trello.get("members/me/cards", function(cards) {
        $cards.empty();
        $.each(cards, function(ix, card) {
            $("<a>")
            .attr({href: card.url, target: "trello"})
            .addClass("card")
            .text(card.name)
            .appendTo($cards);
        });  
    });

我不确定如何根据选择下拉菜单显示卡片？

演示 http://jsfiddle.net/nNesx/1378/

Answer 1

您需要使用不同的资源

而不是使用members/me/cards,使用boards/[board_id]/cards

只需在您的选择中添加一个ID,并为每个选项添加一个ID

var $boards = $("<select>")
        .attr("id", "boards") /* we'll use this later */
        .text("Loading Boards...")
        .appendTo("#output");

     $("<option>")
      /* notice the added board id value */
      .attr({href: board.url, target: "trello", value : board.id})
      .addClass("board")
      .text(board.name)
      .appendTo($boards);

然后你可以抓住所有卡片

var resource = "boards/" . $("#boards").val() . "/cards";
Trello.get(resource, function(cards) {
  // rest of code...
});