1

我在海上,如果有最新版本的 Ember 帮助,我将不胜感激。使用todo 示例,我尝试在以下改编的http://jsfiddle.net/5HMzu/3/中包含路由和 DS 模型

当我在车把模板中使用#each 控制器时,输出如预期的那样;用 CollectionView 替换它并尝试将其绑定到数据源,没有任何输出。

插入的代码:

App.PersonCollectionView = Ember.CollectionView.extend({
itemViewClass: "App.ListOfPeopleTemplateView",
emptyView: Ember.View.extend({
    template: Ember.Handlebars.compile("Oh dear, the collectionView is empty")
}),
 contentBinding: "App.listOfpeopleTemplateController"   

});

结果:“天哪,collectionView 是空的”

模板

<body>  
<script type="text/x-handlebars">
    <!-- an attempt to show the data template 'listOfPeopleTemplate' using a CollectionView -->
    {{view App.PersonCollectionView}}    
</script>    
<script type="text/x-handlebars" data-template-name="listOfPeopleTemplate">       
    {{test}}
    <!-- This was working before I removed the #each and tried to use a CollectionView -->
    <!-- {{#each controller}} -->
    <fieldset>              
        <label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label>
        {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}                  
        <br/>
        <label {{bindAttr for="view.tbFirstName.elementId"}} class="RequiredLabel">First Name</label>
        {{view App.DetailTextField viewName="tbFirstName" valueBinding="firstName"}}
        <br/>                   
        <label {{bindAttr for="view.tbSurname.elementId"}} class="RequiredLabel">Surname</label>
        {{view App.DetailTextField viewName="tbSurname" placeholder="surname" valueBinding="surname"}}
        <br/>                   
    </fieldset>
    <!-- {{/each}} -->
</script>       

JS

//the application
App = Ember.Application.create();
//the models
App.PersonModel=DS.Model.extend({
    personID: DS.attr('number'),
    firstName: DS.attr('string'),
    surname: DS.attr('string'),
    fullName: Ember.computed(function () {
        return this.get('firstName') + ' ' + this.get('surname');
        // Tell Ember that this computed property depends on firstName
        // and lastName
    }).property('firstName', 'surname')
});

App.Store=DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});
App.PersonModel.FIXTURES = [{
    id: 1,
    "personID": "1",
    "firstName": "small",
    "surname": "Hick"   
}, {
    id: 2,
    "personID": "2",
    "firstName": "Katherine",
    "surname": "Hosh"   
}];

App.Router.map(function () {
  this.resource('listOfPeopleTemplate', { path: '/' });
});
//Defining a resource 'listOfPeopleTemplate' will make ember automatically generate a ListOfPeopleTemplateRoute, a ListOfPeopleTemplateController and a ListOfPeopleTemplateView
//You can override this default setup by defining them yourself. This I have done below.

App.ListOfPeopleTemplateRoute = Ember.Route.extend({
    model: function() {
        return App.PersonModel.find();
    }
});
App.ListOfPeopleTemplateController=Ember.ArrayController.extend({   
    test:"does this work test"  
});

App.ListOfPeopleTemplateView=Ember.View.extend({templateName:"listOfPeopleTemplate"});

App.DetailTextField = Em.TextField.extend({
    attributeBindings: ['required', 'readonly', 'name']
});
//New code added to try and use the handlebar template with an ember.collectionView
App.listOfpeopleTemplateController=App.ListOfPeopleTemplateController.create();
 App.PersonCollectionView = Ember.CollectionView.extend({
    itemViewClass: "App.ListOfPeopleTemplateView",
    emptyView: Ember.View.extend({
        template: Ember.Handlebars.compile("Oh dear, the collectionView is empty")
    }),
     contentBinding: "App.listOfpeopleTemplateController"   
 });
4

1 回答 1

1

这里有几件事不对劲。

  • 您永远不会直接实例化控制器,Ember 会为您执行此操作。避免SomeController.create
  • 当您切换到时,CollectionView您需要为其提供要绑定的属性,在本例中为内容。
  • 您直接在 上提供了它PersonCollectionView,但绑定假定控制器的静态路径。这不再适用于 Ember 的容器。您可以提供controllerBinding, 但假设该控制器的路由和模型具有模型。在这种情况下,您仍在application路线上。通常,您只需content在模板中设置。

我相信大部分这些事情都是由于参考了旧版 Ember 的教程/代码。从那以后,Ember 发生了重大变化,不幸的是,网上找到的许多示例代码现在已经过时了。

在这里做了一些调整,把东西放进去ApplicationRoute,添加contentBinding等等。

我可以提几点建议,

  • 尝试从头到尾阅读Ember 入门指南。
  • 浏览像这样的示例,并尝试从头开始重建它们。
  • 避免CollectionView, 并使用#each, 和{{outlet}}。CollectionView 仅在特殊情况下才需要,例如在列表中呈现 10,000 多个项目等。#each在内部使用更智能的CollectionView.
于 2013-07-09T06:09:02.213 回答