将网站重新设置为Ember

时间:2014-09-04 17:30:33

标签: javascript html5 ember.js attributes views

我的任务是将网站重写为Ember应用程序。 到目前为止一切顺利,我了解了Ember路由,模型,控制器等的基础知识。尽管如此,我现在对细节很感兴趣。 现在我在如何实现Ember视图和属性绑定方面遇到了麻烦。 我有这样一个元素:

<a class="someClass" href="http://example.com" data-imgone="public/images/firstimg.jpg" data-imgtwo="public/images/secondimg.jpg" data-title="someTitle" data-description="someDescription">
    <div>
        <!-- some stuff -->
    </div>
</a>

正如我已经理解的那样(尽管很可能是错误的lol)我应该在我的脚本中创建这个元素作为一个视图:

App.MyView = Ember.View.extend({
    tagName: 'a',
    attributeBindings: ['href', 'data-imgone', 'data-imgtwo', 'data-title', 'data-description'],
    href: 'http://example.com',
    'data-imgone': "public/images/firstimg.jpg",
    'data-imgtwo': "public/images/secondimg.jpg",
    data-title="someTitle",
    data-description="someDescription"
});

然后我应该使用视图助手调用myView:

{{#view 'App.MyView}}
    <div>
        <!-- some stuff -->
    </div>
{{/view}}

这不起作用,元素没有被渲染。请告诉我我做错了什么。我是否完全误解了观点和属性绑定? 另外,如果有人有任何关于我的作业的提示/策略,请分享!

1 个答案:

答案 0 :(得分:1)

您不需要单引号来指定您要呈现的视图。这应该足够了:

{{#view App.SomeView}}Link Text{{/view}}

您也不需要引号来声明班级中的数据属性。数据属性可以像这样映射:

App.SomeView = Em.View.extend({

  tagName: 'a', 
  attributeBindings: ['href', 'dataImgone:data-imgone'],

  href: 'http://emberjs.com',
  dataImgone: "public/images/firstimg.jpg",
});

(见jsbin

请注意,在attributeBindings中,我传递的是提供属性的函数/属性,后跟:attributename,在本例中为data-imgone,为['dataImgone:data-imgone'] }。