ember.js model data is not being output by the collectionView

问题

I am at sea, and would be grateful for any help, with the latest version of Ember. Using the todo example, i've tried to include routes and DS models in the following adapted http://jsfiddle.net/5HMzu/3/

When I use a #each controller in the handlebar template, output is as expected; replacing that with a CollectionView and trying to tie that to the data source, nothing is being output.

The inserted code:

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"

});

Result: "Oh dear, the collectionView is empty"

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>

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

回答1:

There are a few things amiss here.

You never directly instantiate a controller, Ember does this for you. Avoid SomeController.create
When you switched to the CollectionView you need to give it what property to bind to, in this case content.
You provided this directly on the PersonCollectionView, but the binding assumes a static path to a controller. This doesn't work with Ember's Container anymore. You can provide a controllerBinding, but that assumes that the route and model for that controller has the model. In this case you are still on the application route. Typically you just set the content in the template.

I believe most of these things are due to referencing tutorials/code for older Ember versions. Ember has changed significantly since and Unfortunately, a lot of example code found online is now out of date.

I fixed things up a bit here, by putting things inside ApplicationRoute, adding contentBinding, etc.

A few suggestions I can make,

Try going through the Ember getting started guide start to finish.
Go through sample examples like this, and try to rebuild them from scratch.
Avoid CollectionView, and use #each, and {{outlet}}. CollectionView is only needed for specialized cases, like rendering a 10,000+ items in a list etc. #each is internally implemented with a much smarter CollectionView.

来源：https://stackoverflow.com/questions/17532131/ember-js-model-data-is-not-being-output-by-the-collectionview

标签

ember.js

handlebars.js

ember-data