ember.js模型数据没有被collectionView输出 [英] ember.js model data is not being output by the collectionView

问题描述

我现在在海上，对于最新版本的Ember，我会很感激任何帮助。使用待办事项示例，我试图添加路线和DS模型在以下改编的 http://jsfiddle.net/5HMzu/3/

当我在句柄模板中使用#each控制器时，输出如预期;用CollectionView代替它，并试图将其绑定到数据源，没有任何输出。

插入的代码：

  App.PersonCollectionView = Ember.CollectionView.extend（{
 itemViewClass：App.ListOfPeopleTemplateView，
 emptyView：Ember.View.extend（{ b $ b模板：Ember.Handlebars.compile（哦，亲爱的，collectionView是空的））
}），
 contentBinding：App.listOfpeopleTemplateController
  
 
 
 
}）; 
 
 
 
结果：哦，亲爱的，collectionView是空的
 
 
 
 TEMPLATE 
 < body> 
< script type =text / x-handlebars> 
 <！ - 尝试使用CollectionView显示数据模板'listOfPeopleTemplate' - > 
 {{view App.PersonCollectionView}} 
< / script> 
< script type =text / x-handlebarsdata-template-name =listOfPeopleTemplate> 
 {{test}} 
 <！ - 在我删除#each并试图使用CollectionView  - > 
<！ -  {{#each controller}}  - > 
< fieldset> 
< label {{bindAttr for =view.tbFullName.elementId}}>全名< / label> 
 {{view App.DetailTextField viewName =tbFullNameplaceholder =Full NamevalueBinding =fullNamereadonly =readonly}} 
< br />> 
< label {{bindAttr for =view.tbFirstName.elementId}} class =RequiredLabel>名字< / label> 
 {{view App.DetailTextField viewName =tbFirstNamevalueBinding =firstName}} 
< br />> 
< label {{bindAttr for =view.tbSurname.elementId}} class =RequiredLabel>姓氏< / label> 
 {{view App.DetailTextField viewName =tbSurnameplaceholder =surnamevalueBinding =surname}} 
< br />> 
< / fieldset> 
<！ -  {{/ each}}  - > 
< / script> 
  
 
 
 
 
 JS 
  //应用程序
 App = Ember.Application.create（）; 
 //模型
 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'）; 
 //告诉Ember这个计算的属性取决于firstName 
 //和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：凯瑟琳，
姓氏：Hosh
}]; 
 
 App.Router.map（function（）{
 this.resource（'listOfPeopleTemplate'，{path：'/'}）; 
}）; 
 //定义一个资源'listOfPeopleTemplate'会让烬自动生成一个ListOfPeopleTemplateRoute，一个ListOfPeopleTemplateController和一个ListOfPeopleTemplateView 
 //你可以通过自己定义它来覆盖这个默认设置。我在下面做了。 
 
 App.ListOfPeopleTemplateRoute = Ember.Route.extend（{
 model：function（）{
 return App.PersonModel.find（）; 
} 
}）; 
 App.ListOfPeopleTemplateController = Ember.ArrayController.extend（{
 test：这个工作测试
}）; 
 
 App.ListOfPeopleTemplateView = Ember.View.extend（{templateName：listOfPeopleTemplate}）; 
 
 App.DetailTextField = Em.TextField.extend（{
 attributeBindings：['required'，'readonly'，'name'] 
}）; 
 //添加新代码以尝试使用带有ember.collectionView的手柄模板
 App.listOfpeopleTemplateController = App.ListOfPeopleTemplateController.create（）; 
 App.PersonCollectionView = Ember.CollectionView.extend（{
 itemViewClass：App.ListOfPeopleTemplateView，
 emptyView：Ember.View.extend（{
 template：Ember.Handlebars。编译（哦，亲爱的，collectionView是空的））
}），
 contentBinding：App.listOfpeopleTemplateController
}）; 
  
 
 
解决方案
这里有一些不足之处。
 
 
 
 
 
你永远不会直接实例化一个控制器，Ember会为你做这件事。避免 SomeController.create  
 
 
当您切换到 CollectionView 时，您需要给它什么属性绑定，在这种情况下的内容。 
 
 
您直接在 PersonCollectionView 中提供了这一点，但绑定假设了一个到控制器的静态路径。这不适用于Ember的容器。您可以提供一个 controllerBinding ，但是假定该控制器的路由和模型具有该模型。在这种情况下，您仍然位于应用程序路线中。通常，您只需在模板中设置内容。 
 
 
 
 
 
我相信大部分这些东西是由于参考旧版Ember版本的教程/代码。 Ember已经发生了很大的变化，遗憾的是，网上发现的很多示例代码现在已经过期。
 
 
 
我修改了一下 here ，通过将内容放入 ApplicationRoute 中，添加 contentBinding 等。
 
 
 
我可以提出一些建议， 
 
 
 
 
尝试从头开始完成 Ember入门指南。
 
 
查看示例示例，如此，并尝试从头开始重建它们。 
 
 
避免 CollectionView ，并使用 #each 和 {{出口}} 。 CollectionView仅用于特殊情况，例如在列表中呈现10000个以上的项目等。 #each 在内部用更聪明的 CollectionView  code>。
 
 
 
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>       


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

解决方案
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.


                        
这篇关于ember.js模型数据没有被collectionView输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！