Question

我想以编程方式更改模板中的div，但我无法让它工作。有没有办法使用辅助函数？

   Template.home.helpers({
         jcropdiv: function() {
               var div = '';
               if(Roles.userIsInRole(Meteor.user(), ['admin'])){
                 div = '<div id="jcrop_target">';
               } else {
                 div = '<div class="jcrop-holder" style="background-color: black; height: 719px; width: 1280px; position: relative;">';
               } 
               return div;
         }
   });

Answer 1

我不相信你可以动态编写标签，但是 CAN 动态地为标签添加属性。例如：

<div {{jcropdiv}}>
  Stuff
</div>

Template.home.helpers({
         jcropdiv: function() {
               var tags;
               if(Roles.userIsInRole(Meteor.user(), ['admin'])){
                 tags = 'id="jcrop_target"';
               } else {
                 tags = 'class="jcrop-holder" style="background-color: black; height: 719px; width: 1280px; position: relative;"';
               } 
               return tags;
         }
   });

根据用户是否处于“管理员”角色，应返回id="jcrop_target"或'class="jcrop-holder" style="background-color: black; height: 719px; width: 1280px; position: relative;"'。

Answer 2

这就是我最终的结果：

//template
 <div id="{{jcropdiv.id}}" class="{{jcropdiv.class}}" style="{{jcropdiv.style}}">


//js
Template.home.helpers({
     jcropdiv: function() {
           var tags={};
           if(Roles.userIsInRole(Meteor.user(), ['Sponsor'])){
            tags.id = 'jcrop_target';
           } else {
              tags.class = 'jcrop-holder';
              tags.style = 'background-color: black; height: 719px; width: 1280px; position: relative;';
           } 
           return tags;
     }
});

Answer 3

为什么不在你的temaplate中做这样的事情而不是帮助

{{#if isInRole 'admin'}}
  <div id="jcrop_target">
    //do something
  </div>
{{else}}
  <div class="jcrop-holder" style="background-color: black; height: 719px; width: 1280px; position: relative;">
   //do something else
  </div>
{{/if}}

我相信它有帮助

由于

以编程方式在模板中编写div

3 个答案: