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

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

1.初始化本地数组变量teams

2.使用ajax异步检索来自服务器的数据

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

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中检索到的其他属性也应该发生同样的情况。

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应用程序模型/数据，然后ember绑定可以发挥所有的作用。

EDIT2

一旦选择了团队，为了在单独的视图中显示团队成员（基于最后的评论），通过单击按钮或从另一个绑定属性，您可以通过ajax请求所选团队id的成员（除非您已经急切地加载了他们），您可以在包含的teammembers1或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
        }
    }
});