如何访问空格键中的标签属性

Question

如何从标签获取属性值，如宽度、颜色、值...

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

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

Answer 1

您不能直接从空格键模板访问标签属性。您需要为此创建一个模板助手。

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

那么你可以这样使用它：

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

UPDATE：为了让助手在 window resize 事件上重新计算，您需要稍微修改一下。您可以为此使用依赖对象。

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

其他可能的解决方案是将 window 宽度存储到 ReactiveVar（它本身是一个反应式数据源）并使用 .on("resize", fn) 来更改 ReactiveVar

Answer 2

经过一些研究，我发现空格键没有合适的解决方案，最好的选择是使用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"); } });
}

如何访问空格键中的标签属性

How to access tag attribute in spacebar

meteor

spacebars