如何根據全局變量調整選取框？ - 流星

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