好吧，我想我在这里又遇到了一些问题。我将解释我正在尝试做什么。
我有一个 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 并将它们从服务器中删除。我也该怎么做？
那么，我应该使用自定义 View 还是有其他方法可以做到这一点？
最佳答案
从 ajax 填充属性的代码存在问题。例如，App.TeammembersController 的属性 team 的代码执行以下操作
1.初始化一个局部数组变量teams
2.使用ajax异步从服务器检索数据
2.1.同时，ajax 回调中的 teams 数组已填充，但从未以包含数据的正确状态返回。一旦 team 数组填充了数据，就需要设置 Controller 的属性。然后 ember 的绑定(bind)将处理剩下的事情(填充 Controller 的属性，通知任何其他感兴趣的对象，事件模板以呈现结果)
3.并返回空的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 检索的其他属性也应该发生同样的情况。
编辑1
下面是基于您的代码的示例。代码已移至 IndexController 内部，并且为简单起见，执行某些操作的按钮已被禁用。
http://emberjs.jsbin.com/IbuHAgUB/1/edit
哈佛商学院
<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 应用程序模型/数据，然后 ember 绑定(bind)将发挥所有作用。
编辑2
为了在选择团队后在单独的 View 中显示团队成员(基于最后的评论)，通过单击按钮或从另一个绑定(bind)属性，您可以通过 ajax 请求所选团队 ID 的成员(除非您已经急切地加载了它们)您可以在包含的 view 或 partial 内呈现 teammembers 的属性。例如，相同的示例，当按下按钮时，成员出现(没有逻辑硬编码，但异步延迟加载数据)，
http://emberjs.jsbin.com/IbuHAgUB/2/edit
哈佛商学院
<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
}
}
});
关于javascript - 在 Ember 中使用数据库中的 JSON 显示数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20211556/