Ember.Select中的奇怪问题

Question

对于Ember.Select，我有一个非常奇怪的问题，我在两个不同的模板中使用相同的Ember.Select，这两个模板都由两个不同的控制器支持。但是我只得到了one 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(),
});

我要把名字列在后面的名单上。为什么会发生这种事？

Answer 1

您应该使用Route从后端检索数据，并在控制器中设置它们(请参阅关于about路由的指南)。

那么您就不应该在optionValueBinding和optionLabelBinding中拥有路径的optionValueBinding部分。

最后，您应该更好地使用来自Ember的{{select}}把手助手。