【问题标题】:Ember.js :: Cannot render ember.js models in viewEmber.js :: 无法在视图中呈现 ember.js 模型
【发布时间】:2012-12-26 22:00:28
【问题描述】:

如果有人能让我摆脱痛苦,我将不胜感激,让我发疯,我知道这将是一件非常简单的事情。

我有一个数组:

数据

var test = [{"name":"Kober Ltd","town":"Bradford","type":"Z1CA","number":3650645629},
{"name":"Branston Ltd.","town":"Lincoln","type":"Z1CA","number":3650645630}]

我想将此信息呈现为 collectionView 中的子元素:

collectionView

App.ThreeView = Ember.CollectionView.extend({
  itemViewClass: Ember.View.extend({    
      click: function(){
        alert('hello')
       },   
    classNames: ['element','foobar'],
    templateName: 'foo'
  })
})

这是我的控制器:

控制器

App.ThreeController = Ember.ArrayController.extend({
content: [],
  init: function(){
    var me = this;
    $.each(test,function(k,v){
        var t = App.ThreeModel.create({
            name : v.name,
            town: v.town,
            type: v.type,
            number: v.number
        }) 
        me.addObject( t )
    })
    console.log( me.content )
  }
})

模板:

    <script type="text/x-handlebars" data-template-name="application">
        {{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="three">
    </script>

    <script type="text/x-handlebars" data-template-name="foo">
        <div class="symbol"> {{ view.content.type }} </div>
        <div class="number"> {{ view.content.number }} </div>
        <div class="name"> {{ view.content.name }} </div>
        <div class="town"> {{ view.content.town }} </div>
    </script>  

我正在使用最新的 Ember so...V2 路由器,它使用“三”名称同步所有部分。如果我将数组直接放入视图中,每个都可以工作:

App.ThreeView = Ember.CollectionView.extend({
  content: test, // manually added a pure array into view content
  itemViewClass: Ember.View.extend({    
      click: function(){
          alert('hello')
      },    
      classNames: ['element','foobar'],
      templateName: 'foo'
  })
})

但是当我尝试使用 Ember.js 对象“正确”执行此操作时,我没有得到任何渲染视图(除了一个空的应用程序视图)。

我已经尝试过变通方法,例如将视图中的“contentBinding”添加到控制器中,以查看是否可以强制连接,但仍然没有。在使用 Three.js 获取渲染内容并进一步操作时,通过容器渲染视图很重要。

所以,总结一下:我可以在视图中渲染纯数组,但控制器没有传递任何内容。顺便说一句,控制器肯定是建立的,因为我可以在 init 上控制台记录它的内容。如果我更改视图名称,控制器不会被实例化,所以我知道命名空间正在工作。

提前致谢!

【问题讨论】:

    标签: ember.js rendering


    【解决方案1】:

    我不确定是否包含整个问题,但是现在,当您定义控制器时,在 init() 函数中,首先不要忘记调用 this._super() (它将通过类层次结构并调用构造函数)。也许这只是缺少的东西。

    编辑:似乎对于新路由器,将视图定义为 CollectionView 不起作用。 所以我用普通的 Ember.View 替换它,并在模板中使用 {each} 助手。

    <script type="text/x-handlebars" data-template-name="three">
      {{each controller itemViewClass="App.FooView" tagName="ul"}} 
    </script>
    

    这是一个最小的工作小提琴:http://jsfiddle.net/Sly7/qCdAY/14/

    编辑 2:

    通过重新阅读问题,并看到您尝试将 CollectionView 内容的属性绑定到控制器,我尝试了它,因为它工作正常 :)

    http://jsfiddle.net/Sly7/qCdAY/15/

    【讨论】:

    • 谢谢你,不幸的是这不是这里的解决方案,我觉得它一定很明显,但我已经开始尝试即使是真正随机的东西,比如缓存清除和更换浏览器。
    • 嗯,可以把它放在一个 jsfiddle 中吗?
    • 出色的工作!!只有一件事,这个数组现在是否通过路由器函数返回值呈现为 Ember.js 模型?
    • 不只是js对象。但是你可以很容易地返回一个 ThreeModel 的数组: model: function(){return [App.ThreeModel.create({...}), App.ThreeModel.create({...})]}
    • 我想就是这样!你的第一个小提琴也起作用了,但是当我在原版中进行绑定时,我做了 contentBinding:'App.ThreeController.content',我现在就试试,但我不得不手动绑定视图和内容,这让我很恼火,不应该' t Ember 会自动处理这个吗?
    猜你喜欢
    • 1970-01-01
    • 2013-12-17
    • 2013-11-04
    • 1970-01-01
    • 1970-01-01
    • 2013-02-11
    • 2015-03-04
    • 1970-01-01
    • 2013-08-15
    相关资源
    最近更新 更多