在meteor.js上用一个js模板绑定两个html视图

在meteor.js上用一个js模板绑定两个html视图,meteor,meteor-blaze,Meteor,Meteor Blaze,我有两个单独的html模板,分别用于桌面和手机大小,具有通用逻辑。是否有可能将这些html模板与一个js模板绑定 我发现最简单的方法是使用一个选择移动或桌面模板,并将js附加到父模板(嵌入动态模板的模板)上。您可以使用媒体查询来完成此操作。它允许您指定断点(即屏幕大小),在该断点处呈现的HTML将发生更改。这将允许桌面用户只需调整窗口大小即可查看移动视图 在我的案例中,解决方案是下一个 我使用Blaze在两个模板之间切换,比如adviced me Michel Floyd,助手被传递到datac

我有两个单独的html模板,分别用于桌面和手机大小,具有通用逻辑。是否有可能将这些html模板与一个js模板绑定

我发现最简单的方法是使用一个选择移动或桌面模板,并将js附加到父模板(嵌入动态模板的模板)上。

您可以使用媒体查询来完成此操作。它允许您指定断点(即屏幕大小),在该断点处呈现的HTML将发生更改。这将允许桌面用户只需调整窗口大小即可查看移动视图


在我的案例中,解决方案是下一个 我使用Blaze在两个模板之间切换,比如adviced me Michel Floyd,助手被传递到datacontext到两个模板。 我的通用html页面视图和下面js模板的一部分

<template name="signUpTutor">
{{#if equals view 'mobile'}}
    {{> Template.dynamic template="signUpTutorMobile" data=dataContext}}
{{else}}
    {{> Template.dynamic template="signUpTutorDesktop" data=dataContext}}
{{/if}}

{{#如果等于查看“移动”}
{{>Template.dynamic Template=“signuputormobile”data=dataContext}
{{else}
{{>Template.dynamic Template=“signuputordesktop”data=dataContext}
{{/if}

Template.signuputor.helpers({
“等于”:函数(a,b){
返回a==b;
},
“dataContext”:函数(){
var dataContext={}
dataContext.subjects=subjects.find();
dataContext.ageOptions=函数(){
var ageOptions=[];

对于(var i=0,a=19;a这很清楚,但我不能只使用媒体查询。首先,我已经有了两个单独的html布局,所有一个视图的第二个是模态窗口,另一个是普通页面。谢谢,这是解决方案。但这真的是最简单的方法吗?没有合法的api来绑定逻辑和视图吗?使用blaze切换布局更容易
{{if isMobile}{>mobileTemplate}{{{else}{{{>desktopTemplate}}
但是每个模板都需要自己的帮助程序。动态模板是我所知道的跨模板重用js的唯一解决方法(除了全局帮助程序)。
Template.signUpTutor.helpers({
'equals': function (a, b) {
    return a == b;
},
'dataContext': function () {
    var dataContext = {}
    dataContext.subjects = Subjects.find();
    dataContext.ageOptions = function () {
        var ageOptions = [];
        for (var i = 0, a = 19; a <= 99; i++, a++) {
            ageOptions[i] = a;
        }
        return ageOptions;
    };
    dataContext.experienceOptions = function () {
        var experienceOptions = [];
        for (var i = 0, a = 1; a <= 60; i++, a++) {
            experienceOptions[i] = a;
        }
        return experienceOptions;
    };
    return dataContext;
}