Как получить доступ к атрибут тега в ПРОБЕЛЕ

Question

Как получить значение атрибута из тега, как ширина, цвет, стоимость ...

<template> 
    {{#if body.width > 979px }} 
     {{> tmp1 }} 
    {{else}} 
     {{> tmp2 }} 
    {{/if}} 
</template> 

<template name="tmp1">...</template> 
<template name="tmp2">...</template> 

Answer 1

После некоторых исследований я обнаружил, что нет правильного решения для космических аппаратов, и лучшим вариантом является использование js-кода.

Так вот код:

Session.set("width", $(window).innerWidth()); 
window.onresize = function() { Session.set("width", $(window).innerWidth()); }; 

if(Meteor.isClient) { 
    Template.body.helpers({ 'dynamicTemplateName': function() { return Session.get("width"); } }); 
} 

Answer 2

Вы не можете получить доступ атрибутов тега непосредственно из шаблона Spacebars. Для этого вам нужно создать помощник шаблона.

Template.templateXY.helpers({ 
    bigBody: function() { 
     return $("body").width() > 979; 
    } 
}); 

затем использовать его как это:

<template name="templateXY"> 
    {{#if bigBody}} 
     {{> tmp1}} 
    {{else}} 
     {{> tmp2}} 
    {{/if}} 
</template> 

UPDATE: для помощника пересчитывать на события Изменить размер окна, необходимо изменить его немного. Для этого вы можете использовать объект Dependency.

Template.templateXY.onCreated(function() { 
    // create a dependency 
    this.resizeDep = new Dependency(); 
}); 

Template.templateXY.onRendered(function() { 
    let tmpl = this; 
    // invalidate the dependency on resize event (every 200ms) 
    $(window).on("resize.myEvent", _.throttle(function() { 
     tmpl.resizeDep.changed(); 
    }, 200)); 
}); 

Template.templateXY.helpers({ 
    bigBody: function() { 
     // recompute when the dependency changes 
     Template.instance().resizeDep.depend(); 
     return $("body").width() > 979; 
    } 
}) 

Template.templateXY.onDestroyed(function() { 
    $(window).unbind("resize.myEvent"); 
}); 

Другое возможное решение было бы хранить ширину окна к ReactiveVar (который сам по себе является реактивным источником данных) и использовать .on («размер», п), чтобы изменить ReactiveVar