Wie Tag für den Zugriff auf Attribut in Leer

Question

Wie Attributwert von Tag wie Breite zu erhalten, Farbe, Wert ...

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

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

Answer 1

Nachdem einige die ReactiveVar zu ändern Recherchen Ich fand, dass es keine spacebars richtige Lösung gibt und die beste Option ist, js-Code zu verwenden.

So, hier ist der Code:

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

Sie können nicht darauf zugreifen Tag direkt von Spacebar Vorlagenattributen. Sie müssen dafür einen Vorlagenhelfer erstellen.

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

dann verwenden Sie es wie folgt aus:

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

UPDATE: für die Helfer auf Fenster Resize-Ereignis neu zu berechnen, müssen Sie es ein wenig ändern. Sie können dafür ein Abhängigkeitsobjekt verwenden.

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

Andere mögliche Lösung wäre es, die Fensterbreite zu einem ReactiveVar zu speichern (die eine reaktive Datenquelle selbst) und verwendet .on („Größe ändern“, fn)