Question

我正在编写代码以使用匹配媒体通过js检测断点。在简单的js中，我知道如何为此创建一个单独的实用程序并使用它，但在Ember中，我该如何处理它，我是否需要创建一个帮助器或其他东西。

普通JS代码：

define('viewportDimension', function() {
    var viewportSize ={
        mqMaxTablet : '959px',
        isTablet: function(){
            if(matchMedia){
                var mq = window.matchMedia("(max-width:" + this.mqMaxTablet+ ")");
                mq.addListener(this.viewportChanged);
                this.viewportChanged(mq);
            }
        },
        viewportChanged: function(mq){
            if(mq.matches){
                return true;
            }
        }
    };
    return viewportSize;
});

Ember控制器：

isTablet: function (){
 viewportDimension.isTablet();
}.property('')

我理解上面的代码不起作用。我不知道如何使它更像Ember＆＃39; ish类型。＆＃34; isTablet＆＃34;只要媒体查询匹配完成，就应将property设置为true。

开始将我的普通js转换为emberish（如下所示），但不知道如何继续。

define('viewportDimension',function(){
    var viewportSize = Ember.Object.extend({
        isTablet: function(){
            alert("1");

        }.property('')
    });
    return viewportSize;


});

Ember.Application.initializer({
    name: 'viewport-dimension',
    initialize: function(container,app){
        require('viewportDimension',function(object){
            app.ViewportDimension = object
        })
    }
})

Answer 1

请查看simple-breakpoint-detector

Ember js - 如何创建共享的健身

1 个答案: