顯示使用Ember中的數據庫使用JSON的數組

Question

嗯，我想我在這裏再次遇到一些問題。我會解釋我正在嘗試做什麼。

我有一個teammembers模板，我想在其中顯示團隊成員&他們來自特定團隊的具體信息。爲此我必須加入3張桌子。

該查詢應該給你一個想法：

SELECT * 
FROM teams_members tm 
inner join members m on tm.members_member_id=m.id 
inner join teams t on tm.team_team_id=t.id 
WHERE 
t.team_name='Vancouver Canuck' 

我最初以爲我可以做一個簡單的數組，只是做pushObject。但它不起作用&此外，我將如何顯示它們？

這裏是我的嘗試：

App.Model = Ember.Object.extend({}); 

App.TeammembersController = Ember.ObjectController.extend({ 
    teammembers : [], //This is for getTeamMembers Action, Coming as undefined 
    selectedTeam : null, 
    team : function() { 
     var teams = []; 
     $.ajax({ 
      type : "GET", 
      url : "http://pioneerdev.us/users/getTeamNames", 
      success : function(data) { 
       for (var i = 0; i < data.teams.length; i++) { 
        var teamNames = data.teams[i]; 
        teams.pushObject(teamNames); 
       } 
      } 
     }); 
     return teams; 
    }.property(), 

    actions : { 
     getTeamMembers : function() { 

      teamName = this.get('selectedTeam.team_name'); 
      data = { 
       team_name : this.get('selectedTeam.team_name'), 
      }; 
      if (!Ember.isEmpty(teamName)) { 

       $.ajax({ 
        type : "POST", 
        url : "http://pioneerdev.us/users/getTeamMembers", 
        data : data, 
        dataType : "json", 
        success : function(data) { 
         for (var i = 0; i < data.teammembers.length; i++) { 
          var teamNames = data.teammembers[i].firstname; 
          teammembers.pushObject(teamNames); 
         } 
        } 
       }); 
       return teammembers; 
       console.log(teammembers); 
      } else { 

      } 

     } 
    } 
}); 

我越來越teammember陣列在這個不確定的。 當從Ember.Select中選擇團隊名稱時，actions中的片段將負責分發團隊成員的信息。

感謝https://stackoverflow.com/users/59272/christopher-swasey，我能夠重新使用我的片段在這裏：

<script type="text/x-handlebars" id="teammembers"> 
      <div class="row"> 
       <div class="span4"> 
       <h4>Your Team Members</h4> 
       {{view Ember.Select 
       contentBinding="team" 
       optionValuePath="content.team_name" 
       optionLabelPath="content.team_name" 
       selectionBinding="selectedTeam" 
       prompt="Please Select a Team"}} 
       <button class="btn" 
       {{action 'getTeamMembers' bubbles=false }}>Get Team Members</button> 
       </div> 
      </div> 
     </script> 

此外，什麼都會做用戶，他將Ember.Select &選擇團隊時，他點擊按鈕，某處我應該能夠吐出團隊成員&他們的信息。將來，我可能想要從服務器中獲取id並將其刪除。我該怎麼做呢？

那麼，我應該使用自定義視圖還是有一些其他方式來做到這一點？

Answer 1

從ajax填充屬性的代碼存在問題。例如屬性的代碼的App.TeammembersControllerteam具有下列功能

1.initializes本地數組變量teams

2.採用AJAX來檢索異步從服務器

數據2.1.meanwhile的teams ajax回調中的數組會被填充，但從不返回包含數據的適當狀態。一旦團隊數組填充了數據，就需要設置控制器的屬性。然後Ember的結合將負責其餘的（填充控制的財產，通知任何其他對象感興趣，事件模板來呈現結果）

3.and返回空teams陣列

所以，你需要添加兩行代碼如下，

team : function() { 
     var teams = []; 
     var self = this;/*<- */ 
     $.ajax({ 
      type : "GET", 
      url : "http://pioneerdev.us/users/getTeamNames", 
      success : function(data) { 
       for (var i = 0; i < data.teams.length; i++) { 
        var teamNames = data.teams[i]; 
        teams.pushObject(teamNames); 
       } 
       self.set("team",teams);/*<- */ 
      } 
     }); 
     return teams; 
}.property() 

對於從ajax檢索到的其他屬性應該會發生同樣的情況。

EDIT1

下面是基於您的代碼的例子。代碼已經在IndexController中移動，並且爲簡單起見，執行某個操作的按鈕已被禁用。

http://emberjs.jsbin.com/IbuHAgUB/1/edit

HBS

<script type="text/x-handlebars" data-template-name="index"> 

    <div class="row"> 
       <div class="span4"> 
       <h4>Your Team Members</h4> 
       {{view Ember.Select 
       content=teams 
       optionValuePath="content.team_name" 
       optionLabelPath="content.team_name" 
       selection=selectedTeam 
       prompt="Please Select a Team"}} 
       <button class="btn" 
       {{action 'getTeamMembers' bubbles=false }} disabled>Get Team Members</button> 
       </div> 
      </div> 

      selected team:{{selectedTeam.team_name}} 
    </script> 

JS

App = Ember.Application.create(); 

App.Router.map(function() { 
    // put your routes here 
}); 


App.Model = Ember.Object.extend({}); 

App.IndexController = Ember.ObjectController.extend({ 
    test:"lalal", 
    teammembers : [], 
    selectedTeam : null, 
    teams : function() { 
     //var teams = []; 
     var self = this; 
     /*$.ajax({ 
      type : "GET", 
      url : "http://pioneerdev.us/users/getTeamNames", 
      success : function(data) { 
       for (var i = 0; i < data.teams.length; i++) { 
        var teamNames = data.teams[i]; 
        teams.pushObject(teamNames); 
       } 
      } 
     });*/ 
     setTimeout(function(){ 

      var data = [{team_name:'team1'}, {team_name:'team2'}, {team_name:'team3'}];//this will come from the server with an ajax call i.e. $.ajax({...}) 

    self.set("teams",data); 

    },1000);//mimic ajax call 

     return []; 
    }.property(), 
    actions : { 
     getTeamMembers : function() { 

      teamName = this.get('selectedTeam.team_name'); 
      data = { 
       team_name : this.get('selectedTeam.team_name') 
      }; 
      if (!Ember.isEmpty(teamName)) { 

       /*$.ajax({ 
        type : "POST", 
        url : "http://pioneerdev.us/users/getTeamMembers", 
        data : data, 
        dataType : "json", 
        success : function(data) { 
         for (var i = 0; i < data.teammembers.length; i++) { 
          var teamNames = data.teammembers[i].firstname; 
          teammembers.pushObject(teamNames); 
         } 
        } 
       });*/ 
       return teammembers; 
      } else { 

      } 

     } 
    } 
}); 

同樣的概念可以遵循從服務器檢索的任何數據和修改/刪除它。請記住，所有請求都是異步，並且在回調函數中您應該更新您的應用程序模型/數據，然後使用ember綁定完成所有的魔術。

EDIT2

爲了顯示在單獨的視圖中的小組成員（基於最後評論）一旦隊被選擇，或者通過點擊按鈕或從另一綁定屬性可能會通過AJAX請求所選團隊ID的成員（除非您已經急切地加載），您可以在view或partial內渲染teammembers的屬性。例如相同的示例和該按鈕被按下時的成員出現（沒有邏輯硬編碼但異步延遲裝入數據），

http://emberjs.jsbin.com/IbuHAgUB/2/edit

HBS

<script type="text/x-handlebars" data-template-name="_members"> 
    <i>this is a partial for members</i> 
    {{#each member in teammembers}}<br/> 
    {{member.firstName}} 
    {{/each}} 
    </script> 

JS

App.IndexController = Ember.ObjectController.extend({ 
    test:"lalal", 
    teammembers : [], 
    selectedTeam : null, 
    teams : function() { 
     var self = this; 
     setTimeout(function(){ 

      var data = [{team_name:'team1'}, {team_name:'team2'}, {team_name:'team3'}];//this will come from the server with an ajax call i.e. $.ajax({...}) 

    self.set("teams",data); 

    },1000);//mimic ajax call 

     return []; 
    }.property(), 
    actions : { 
     getTeamMembers : function() { 
    var self = this; 
    setTimeout(function(){ 

      var data = [{firstName:'member1'}, {firstName:'member2'}];//this will come from the server with an ajax call i.e. $.ajax({...}) 

    self.set("teammembers",data); 

    },1000);//mimic ajax call 

     } 
    } 
});