Question

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

我希望实现的功能之一是使用选取框文本（如滚动底部文本）。

我添加了包meteor-jquery-marquee，它可以很好地使用单个字符串。但每当我尝试修改字符串时，没有任何反应，它保持不变。

值得一提的是，我确实尝试了会话，并且它会更改文本，但是，选框动画会停止，这会破坏目的。

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

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

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

删除globalMessage()帮助

添加将跟踪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
  }
});

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

1 个答案: