Question

我正处于需要为同一路线上的特定设备加载不同模板的情况。比方说，例如登录页面是一条路线，但需要为3台设备（台式机，平板电脑，手机）加载不同的模板。第一步是设备拘留，但接下来会有什么最好的或更好的方式？

媒体查询不是一种选择，因为我不想缩小桌面窗口并查看平板电脑或手机布局。

Answer 1

我会在服务器上进行浏览器检测，并根据设备提供不同的模板文件。编写三组模板并将它们编译成单独的Javascript文件，然后在页面加载时提供正确的Javascript文件。如果您以相同的方式命名和编译所有模板，Ember甚至不会知道您有不同的模板。

Answer 2

您可以通过覆盖路线中的renderTemplate方法，根据某些条件显示不同的模板。以下是每次访问路径时呈现随机模板的示例：

App.ThatRoute = Ember.Route.extend({
  renderTemplate: function() {
    var random = Math.random();
    console.log(random);

    if(random > .5){
      this.render('template1');  
    }
    else {
      this.render('template2');
    }   
  }
});

使用jsbin here

相同的路线，但设备不同的模板

2 个答案: