Question

我在海上，并会感谢任何帮助，最新版本的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是空的”

TEMPLATE

<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"   
 });

Answer 1

这里有一些不妥之处。

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

我相信大多数这些都是由于引用旧版Ember版本的教程/代码。 Ember已发生重大变化，不幸的是，很多在线发现的示例代码现已过时。

通过将内容放入ApplicationRoute，添加contentBinding等，我将事情稍微修改了一点{/ 3}}。

我可以提出一些建议，

尝试完成here开始。
浏览Ember getting started guide等示例示例，并尝试从头开始重建它们。
避免使用CollectionView，并使用#each和{{outlet}}。 CollectionView仅适用于特殊情况，例如在列表中呈现10,000多个项目等。#each内部实现了更智能的CollectionView。

collectionView没有输出ember.js模型数据

1 个答案: