Javascript 在Ember中使用数据库中的JSON显示数组

嗯，我想我在这里又遇到了一点问题。我会解释我想做什么

我有一个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 {

            }

        }
    }
});

此外，用户将做什么，他将从余烬中选择团队。选择&当他单击按钮时，我应该能够在某处吐出团队成员及其信息。将来，我可能还想获取ID并将其从服务器中删除。我该怎么做呢

---

那么，我应该使用自定义视图还是有其他方法来实现这一点？

从ajax填充属性的代码存在问题。例如，App.TeammembersController的属性团队代码执行以下操作

1.初始化本地数组变量

2.使用ajax从服务器异步检索数据

2.1.同时，ajax回调中的teams数组被填充，但从未以包含数据的正确状态返回。在使用数据填充teams数组后，需要设置控制器的属性。然后，ember的绑定将处理rest填充控制器的属性，通知任何其他感兴趣的对象，事件模板以呈现结果

3.1并返回空的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()

JS

---

从ajax填充属性的代码有一个问题。例如，App.TeammembersController的属性团队代码执行以下操作

1.初始化本地数组变量

2.使用ajax从服务器异步检索数据

2.1.同时，ajax回调中的teams数组被填充，但从未以包含数据的正确状态返回。在使用数据填充teams数组后，需要设置控制器的属性。然后，ember的绑定将处理rest填充控制器的属性，通知任何其他感兴趣的对象，事件模板以呈现结果

3.1并返回空的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()

JS

---

您可能希望看到代码的运行情况，这只是用来填充余烬的。选择。我想我现在得到了您的答案。@user1601973用一个例子更新了答案，希望能有所帮助。我仍然怀疑我不能解释我的问题，余烬。选择对我来说很好。我感兴趣的是在一个单独的视图中显示团队中的成员。虽然我觉得我可以用同样的方法来做。@user1601973是的，您可以使用另一个视图或部分视图，甚至可以调用render并使用另一个控制器，这取决于系统的要求和设计。用另一个例子更新了答案。你可能想看到代码的运行情况，这个只是用来填充余烬的。选择。我想我现在得到了你的答案。@user1601973用一个例子更新了答案，希望能有所帮助。我仍然怀疑我不能解释我的问题，余烬。选择对我来说很好。我感兴趣的是在一个单独的视图中显示团队中的成员。虽然我觉得我可以用同样的方法来做。@user1601973是的，您可以使用另一个视图或部分视图，甚至可以调用render并使用另一个控制器，这取决于系统的要求和设计。用另一个例子更新了答案。

<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>

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 {

            }

        }
    }
});

<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>

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

        }
    }
});