I seem to be facing a challenge once again. Let me elaborate on what I am trying to achieve.
Within the teammembers template, I aim to display information about Team Members and their details from a specific team by joining 3 tables.
Here is an example of the query:
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'
Initially, I thought I could create a simple array and use pushObject. However, this approach is not working and I'm unsure of how to display the information.
Here is what I have attempted:
App.Model = Ember.Object.extend({});
App.TeammembersController = Ember.ObjectController.extend({
teammembers : [], //This is for the getTeamMembers Action, coming up 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 {
}
}
}
});
I am encountering an issue where the teammember array is undefined in this scenario. The snippet within the actions will be responsible for displaying Team Member information when a Team Name is selected from Ember.Select.
I would like to give credit to for guiding me to reuse my snippet in this context:
<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>
Furthermore, the user will select a team from Ember.Select and upon clicking the button, I should be able to display the team members and their information somewhere. In the future, I might want to retrieve IDs and delete them from the server as well. How can I accomplish this?
Therefore, should I implement custom views or is there an alternative approach to address this?