javascript - 如何根据全局变量调整选取框？ - meteor

Question

我正在使用 Meteor Framework 开发一个应用程序。

我希望实现的功能之一是具有选取框文本(如滚动底部文本)。

我已经添加了包meteor-jquery-marquee用一根绳子就能很好地工作。但每当我尝试修改字符串时，什么也没有发生，并且它保持不变。

值得一提的是，我确实尝试过 session ，它改变了文本，但是，选框动画停止了，这违背了目的。

我已经被困了几个小时试图让它工作，一些帮助真的可以拯救我的屁股。

我已将 client/main.js 中的全局变量初始化为

globalMessage = "Welcome to my proJECT";

并且它可以与选框一起滚动。

提前谢谢您!

我的代码:

我的 body 模板

<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

您的代码显然缺乏 react 性，让我们解决这个问题。

首先，将 globalMessage 初始化为 ReactiveVar 实例 (client/main.js):

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

接下来，对其值变化使用react的代码(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
  }
});