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

Question

好吧，我想我在这里又遇到了一些问题。我将解释我正在尝试做的事情。

我有一个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 中选择 Team Name 时，actions 中的 sn-p 将负责吐出 Team Member 的信息。

感谢https://stackoverflow.com/users/59272/christopher-swasey，我能够在这里重用我的sn-p：

<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 并将它们从服务器中删除。我该怎么做呢？

那么，我应该使用自定义视图还是有其他方法可以做到这一点？

Answer 1

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

1.初始化一个局部数组变量teams

2.使用ajax异步从服务器获取数据

2.1.meanwhile ajax 回调中的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

哈佛商学院

<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

为了在选择团队后在单独的视图中显示团队成员（基于最后一个 cmets），通过单击按钮或从另一个绑定属性您可以通过 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

        }
    }
});