将网站重新设计为Ember

Restyling a website into Ember

本文关键字：Ember 网站      更新时间：2023-09-26

我的任务是将一个网站重写为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>

正如我所理解的（很可能是错误的，哈哈），我应该在我的脚本中创建这个元素作为视图：

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}}

这不起作用，元素没有被渲染。请告诉我我做错了什么。我是否完全误解了观点和属性绑定的观点？此外，如果有人对我这样的任务有任何建议/策略，请分享！

您不需要一个引号来指定要渲染的视图。这应该足够了：

{{#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']。

相关文章：