グローバル変数に基づいてマーキーを調整するにはどうすればよいですか？ - Meteor

Question

私はMeteor Frameworkを使ってアプリケーションを開発しています。

私が実装しようとしている機能の1つは、マーキーテキスト（スクロールボトムテキストのような）を持つことです。

私はパッケージmeteor-jquery-marqueeを追加しました。これは単一の文字列でうまく動作します。しかし、文字列を変更しようとすると、何も起こりませんし、同じままです。

私はセッションを試したことに言及する価値がありますが、テキストを変更しますが、マーキーアニメーションは停止し、目的を破ります。

私は何時間も働いて仕事に就きようとしていましたが、ここで私のお尻を本当に助けてくれる人がいました。

私は

globalMessage = "Welcome to my proJECT"; 

としてクライアント/ main.jsでグローバル変数を初期化したのだが、うまくマーキーでスクロールします。

ありがとうございます！

マイコード：私はマーキーを編集しようとしている

私の体のテンプレート

<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

あなたのコードには明らかに反応性がないので、修正しましょう。

拳、globalMessageReactiveVarとしてインスタンス（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 
       }); 
   }); 
   

をそして、最後に、ReactiveVarインスタンスで動作するようにdailyMessageControlテンプレートにコードを更新する：

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