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

Question

好吧，我想我在这里再次遇到一些问题。我会解释我想做什么。

我有一个teammembers模板，我想在其中展示团队成员＆amp;他们来自特定团队的具体信息。为此，我必须加入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。但它不起作用＆amp;而且，我将如何展示它们？

这是我试过的：

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＆amp;当他点击按钮时，某个地方我应该能够吐出团队成员＆amp;他们的信息。将来，我可能想要抓取ID并从服务器中删除它们。我怎么能这样做呢？

那么，我应该使用自定义视图还是有其他方法来执行此操作？

Answer 1

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

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 {

            }

        }
    }
});

可以遵循相同的概念从服务器检索任何数据并修改/删除它。请记住，所有请求都是 async ，并且在回调函数中你应该更新你的ember应用程序模型/数据，然后ember绑定会做所有的魔术。

<强> EDIT2

为了在选择团队后在单独的视图中显示团队成员（基于最后的评论），通过单击按钮或从另一个绑定的属性，您可以通过ajax请求所选团队ID的成员（除非您已经热切地加载了它们）您可以在包含的teammembers或view内呈现partial的属性。例如，同样的例子，当按下按钮时会出现成员（没有逻辑硬编码但是异步延迟加载数据），

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

        }
    }
});