如何根据全局变量调整选取框？ - 流星

Question

我正在开发一个使用流星框架的应用程序。

我期待实现的功能之一是有一个选取框文本（如滚动底部文本）。

我已经添加了包meteor-jquery-marquee，它使用单个字符串很好用。但每当我尝试修改字符串时，都不会发生任何反应，并且它保持不变。

值得一提的是，我确实尝试了会话，并且它改变了文本，但是跑马灯动画停止了，这打破了目的。

我一直坚持几个小时试图让它工作，一些帮助将真正节省我的屁股在这里。

我已经初始化的全局变量在客户端/ main.js为

globalMessage = "Welcome to my proJECT"; 

，并将其与字幕就好了滚动。

预先感谢您！

我的代码：

我的身体模板

<template name="App_Body"> 
    {{> Header}} 
    {{>Template.dynamic template=main}} 
    {{> Footer}} 
    <div style="color: white;" class="ui center aligned container"> 
    <div class='marquee'>{{globalMessage}}</div> 
    </div> 
</template> 

body.js

Template.App_Body.helpers({ 
    globalMessage() { 
    return globalMessage; 
    }, 
}); 

在那里我试图编辑字幕：

<template name="dailyMessageControl"> 
    <div class="container"> 
    <br> 
    <br> 
    <div class="info pull-right"> <!-- column div --> 
     <div class="panel panel-default"> 
     <div class="panel-heading clearfix"> 
      <h1 class="panel-title text-center panel-relative"> Modify Daily Message</h1> 
     </div> 
     <div class="list-group"> 
      <div class="list-group-item"> 
      <p style="font-size: 30px;">Current Message: <br>{{globalMessage}}</p> 
      </div> 
      <div class="panel-footer"> 
      <form> 
       <div class="form-group"> 
       <label for="exampleInputEmail1">Enter new messages</label> 
       <input type="text" name="newMsg" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="New Message"> 
       </div> 
       <button type="submit" class="btn btn-primary">Submit</button> 
      </form> 
      </div> 
     </div> 
     </div> 
    </div><!-- end column div --> 
    </div> 
</template> 

的。 js

Template.dailyMessageControl.helpers({ 
    globalMessage() { 
    return globalMessage; 
    }, 
}); 

Template.dailyMessageControl.events({ 
    'submit form': function(){ 
    event.preventDefault(); 
    var newMsg = event.target.newMsg.value; 
    globalMessage = newMsg; 
    } 
}); 

Answer 1

您的代码显然缺乏反应性，我们来修复它。

拳，初始化globalMessage为ReactiveVar实例（client/main.js）：

globalMessage = new ReactiveVar('Welcome to my proJECT'); 

接着，代码到其值的变化（body.js）反应：

1. 删除globalMessage()辅助

2. 添加代码，将跟踪globalMessage变量，并重新创建$.marquee：

   Template.App_Body.onRendered(function appBodyOnRendered() { 
       this.autorun(() => { 
       const value = globalMessage.get(); 
       const $marquee = this.$('.marquee'); 
       $marquee.marquee('destroy'); 
       $marquee.html(value); 
       $marquee.marquee(); // add your marquee init options here 
       }); 
   }); 
   

而且，最后，在dailyMessageControl模板更新代码ReactiveVar实例的工作：

Template.dailyMessageControl.helpers({ 
    globalMessage() { 
    return globalMessage.get(); // changed line 
    }, 
}); 

Template.dailyMessageControl.events({ 
    'submit form': function(){ 
    event.preventDefault(); 
    var newMsg = event.target.newMsg.value; 
    globalMessage.set(newMsg); // changed line 
    } 
});