使用Ember.js处理视觉元素

Question

我正在探索移动框架，我遇到了Ember.js。我喜欢MVC模型，但我很好奇视觉元素通常是如何处理的。例如，使用jQuery移动，您可以轻松创建针对移动优化的表单元素(按钮、滑块、切换开关等)。您还可以处理页面过渡。这些类型的可视元素似乎超出了Ember.js的范围。

大多数人会将Ember.js与另一个处理可视化元素的框架(如jQuery Mobile)结合使用吗？

Answer 1

Ember在内部使用jQuery，并且倾向于与jQueryUI小部件很好地协同工作。人们遇到的主要问题是ember如何呈现视图和丢失事件处理程序的jQueryUI小部件的动态本质(这通常很容易解决)。

理想情况下，您可以使用Ember视图层为滑块等创建自定义视图，如果需要，这些自定义视图可以包装外部小部件。

https://github.com/flamejs/flame.js

FlameJS也是一个有趣的项目，它提供了很多你想要的东西。

Answer 2

您可以使用从Ember.View类继承的didInsertElement函数轻松地将基于jQuery的插件和框架与Ember集成。一个简单的例子是制作一个日期选择器：

App.DatePicker = Em.TextField.extend({
    didInsertElement: function() {
        this.$().datepicker();
    }
});

在本例中，this.$()是$(this.element)的Ember缩写，它在文本输入插入dom之后创建日期选择器。您可以使用Ember内置的观察器和属性绑定来处理更改。

jQueryMobile特别需要一些配置来允许Ember控制路由和链路。https://github.com/LuisSala/emberjs-jqm就是一个很好的例子。

Answer 3

你有没有在bootstrap.js上查过？它们的所有样式都会自动缩放，以适应正在显示的任何大小的屏幕，并且不需要任何特殊的东西来集成到handlebars模板中，只需添加适当的类，它基本上就会处理其余的事情。

http://twitter.github.com/bootstrap/