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

我正在使用Meteor框架开发一个应用程序

我希望实现的特性之一是有一个选框文本（如滚动底部文本）

我已经添加了这个包，它只需一个字符串就可以很好地工作。但是每当我试图修改字符串时，都不会发生任何事情，并且它保持不变

值得一提的是，我确实尝试了会话，它改变了文本，但是，字幕动画停止，这违背了目的

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

我已将client/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>

我试图编辑字幕的地方：

<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>

---

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

首先，将

globalMessage

初始化为

ReactiveVar

实例（

client/main.js

）：

接下来，对其值更改做出反应的代码（

body.js

）：

删除

globalMessage（）

helper

添加跟踪

globalMessage

变量并重新创建

$的代码。选框

：

最后，更新

dailyMessageControl

模板中的代码以使用

ReactiveVar

实例：

Template.dailyMessageControl.helpers({
全局消息（）{
返回globalMessage.get（）；//已更改行
},
});
Template.dailyMessageControl.events({
“提交表单”：函数（）{
event.preventDefault（）；
var newMsg=event.target.newMsg.value；
globalMessage.set（newMsg）；//已更改行
}
});

您的代码显然缺乏反应性，让我们来解决这个问题

首先，将

globalMessage

初始化为

ReactiveVar

实例（

client/main.js

）：

接下来，对其值更改做出反应的代码（

body.js

）：

删除

globalMessage（）

helper

添加跟踪

globalMessage

变量并重新创建

$的代码。选框

：

最后，更新

dailyMessageControl

模板中的代码以使用

ReactiveVar

实例：

Template.dailyMessageControl.helpers({
全局消息（）{
返回globalMessage.get（）；//已更改行
},
});
Template.dailyMessageControl.events({
“提交表单”：函数（）{
event.preventDefault（）；
var newMsg=event.target.newMsg.value；
globalMessage.set（newMsg）；//已更改行
}
});

请同时显示如何（和在何处）初始化

$（…）.marquee（…）

。请同时显示如何（和在何处）初始化

$（…）.marquee（…）

。您好，这段代码在单台机器上运行得很好，但如果我想让其他机器也看到更改，该怎么办？我有3台设备连接到本地主机服务器，当我更改字幕消息时，它只会在我的机器上更改它，而不会更改其他设备。我怎样才能解决这个问题？谢谢你抽出时间@Ibrahim你应该把它保存到数据库中。您好，这段代码在单台机器上运行得很好，但是如果我想让其他机器也看到这个变化呢？我有3台设备连接到本地主机服务器，当我更改字幕消息时，它只会在我的机器上更改它，而不会更改其他设备。我怎样才能解决这个问题？谢谢你抽出时间@易卜拉欣，你应该把它保存到数据库里。

<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>

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

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

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

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