Question

我正在使用Template.registerHelper来注册一个帮助器，它会给出一些布尔值，输出class1或class2，但也会输出一些初始类，当且仅当它是第一次为这个特定的DOM元素调用时。

Template.registerHelper('chooseClassWithInitial', function(bool, class_name1, class_name2, initial) {
    var ifFirstTime = wasICalledAlreadyForThisDOMElement?;
    return (ifFirstTime)?initial:"" + (bool)?class_name1:class_name2;
});

我很难弄清楚如何知道是否已经为这个特定的表单元素调用了帮助器。

如果我能以某种方式获得对它的引用，我可以在数据属性中存储一个标志。

使用Template.instance（）可以进入＆＃34;模板＆＃34;实例我们现在正在渲染，并使用Template.instance（）。查看Blaze.view实例，但是，如果我们的模板中有多个html元素会怎样？

Answer 1

哦，你是朝错误的方向做的。

如果你想操纵DOM，你应该直接在模板中，而不是jquery方式;）

0。辅助

HTML

<template name="foo">
  <div data-something="{{dataAttributeValue}}"></div>
</template>

JS

Template.foo.helpers({
  dataAttributeValue: function() {
    return 'some-value';
  }
})

如果您无法避免从外部访问DOM，那么Template.onRendered(callback)，callback只会在第一次呈现模板时被调用一次。

1。组件样式

<template name="fadeInFadeOut">
 <div class="fade">{{message}}</div>
</template>

Template.onRendered(function() {
  // this.data is the data context you provide
  var self = this,
      ms = self.data.ms || 500;

  self.$('div').addClass('in'); // self.$('div') will only select the div in that instance!
  setTimeout(function() {
    self.$('div').removeClass('in')
    self.$('div').addClass('out')
  }, ms );
});

然后你可以在其他地方使用它：

<div>
  {{>fadeInFadeOut message="This message will fade out in 1000ms" ms=1000 }}   
</div>

所以你将拥有一个可重复使用的组件..

Answer 2

我现在解决它的方法是手动提供某种全局标识符，对于该项目是唯一的，这不是正确的方法，如果有人有建议让我知道。

let chooseClassWithInitialDataStore = {};
Template.registerHelper('chooseClassWithInitial', function(bool, class_name1, class_name2, initial, id) {
    if(!chooseClassWithInitialDataStore[id]){
        chooseClassWithInitialDataStore[id] = true;
        return initial;
    }
    return (bool)?class_name1:class_name2;
});

用作：

<div class="ui warning message lowerLeftToast
            {{chooseClassWithInitial haveUnsavedChanges
            'animated bounceInLeft'
            'animated bounceOutLeft'
            'hidden' 'profile_changes_global_id'}}
        ">
            Unsaved changes.
</div>

关于这个具体用法：我想把它归类为'animated bounceInLeft'hasUnsavedChanges为true，'animated bounceOutLeft'当它为false时，当它首次渲染时，将其归类为'hidden'（即，在任何更改之前）发生，因此它在呈现时甚至不显示，因此，需要第三个选项，但这不是关于CSS的问题，而是关于Meteor templateHelpers）。

使用registerHelper如何访问使用此帮助程序的DOM元素？

2 个答案:

0。辅助

1。组件样式