与Ember.Select的奇怪问题

时间:2013-11-27 05:51:47

标签: javascript ember.js

我对Ember.Select有一个非常奇怪的问题,我在两个不同的模板中使用相同的Ember.Select,并且都有两个不同的控制器支持。但我只在一个 Ember.Select。

中获得了团队列表

正常工作的第一个地方是:

<script type="text/x-handlebars" data-template-name="twoduser">
        <!-- more Info-->

        <div class="span3 pull-left" id="moreinfo2">
        <div class="row">
            <b>Full Name:</b> {{firstname}} {{lastname}}
            <br/>
            <b>Email:</b> {{email}}
            <br/>
            <b>Address:</b> {{address}}, {{city}}, {{state}}, {{country}}
            <!--<br />
            City: 
            <br/>
            State/Province: 
            <br/>
            Country:
            <br/> -->
            <br/>
            <b>Phone:</b> {{phone}}
            <br/>
            <b>Experience:</b> {{experience}}
            <br/>
            <b>Designation:</b> {{designation}}
            <br>

            {{view Ember.Select
        contentBinding="team"
        optionValuePath="content.team_name"
        optionLabelPath="content.team_name"
        selectionBinding="selectedTeam"
        prompt="Please Select a Team"}}
            <button class="btn" {{action 'addToTeam' }}>Add To Team</button>
        </div>
        </div>
        </script>

对应的控制器:

App.TwoduserController = Ember.ObjectController.extend({
    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(),
});

无法正常工作的第二个地方

 <script type="text/x-handlebars" id="teammembers">
        <div class="row-fluid">
        <div class="span3 offset3">
            <div class="row-fluid">
                <div class="span12">
                <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"}}
            <ul>
                <li>
                {{#each item in arrangedContent}}
                    {{#link-to 'teammemberdetail' item}}{{item.firstname}}, {{item.team_name}}{{/link-to}}
                    <br>
                {{else}}        
                    <p><b>Nothing there</b></p>        
                {{/each}}
                </li>
            </ul>
                <button class="btn"
                {{action 'generate'}}>Get Team Members PDFs</button>
                </div>
                </div>
                <div class="row">
                    <div class="span12 offset5">{{outlet}}</div>
                </div>
                </div>
            </div>
        </script>

对应的控制器:

    App.TeammembersController = Ember.ObjectController.extend({
        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(),
});

我正在获取后者名单。为什么会发生这种情况?

1 个答案:

答案 0 :(得分:2)

您应该使用Route从后端检索数据并将其设置在控制器中(查看有关余烬路线的指南)。

然后,您不应该在content.optionValueBinding中拥有optionLabelBinding部分路径。

最后,你应该更好地使用Ember的{{select}} Handlebars助手。