meteor.jsに1つのjsテンプレートで2つのhtmlビューをバインドします

Question

私は共通のロジックを持つデスクトップとモバイルサイズの2つの別々のhtmlテンプレートを持っています。これらのhtmlテンプレートを1つのjsテンプレートとバインドする可能性はありますか？

Answer 1

私が見つけた最も簡単な方法は、dynamic templateを使用してモバイルテンプレートまたはデスクトップテンプレートを選択し、jsを親テンプレート（ダイナミックテンプレートを埋め込むテンプレート）に添付することです。

Answer 2

メディアクエリを使用してこれを行うことができます。これは、レンダリングされるHTMLが変化するブレークポイント（すなわち、画面サイズ）を指定することを可能にします。これにより、デスクトップユーザーはウィンドウのサイズを変更するだけでモバイルビューを表示できます。私の場合の解決策では

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 3

はミシェル・フロイド、私をadviced、およびヘルパーはちょうど両方のテンプレートへのDataContextに渡されたように、私はテンプレートを切り替えるためにブレイズを使用 次でした。

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

以下JSテンプレートの私の一般的なHTMLページ・ビューと一部

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

}）。