Question

我一直想弄清楚为什么Meteor不让我测试我的按钮但是JSfiddle会。我在终端运行meteor命令的代码，它打开就好像它运行正常，我输入我的文字但是它不会产生列表项。当我复制代码并将其粘贴到js小提琴上时，它可以正常工作。

我是编码的新手，我对流星的经验非常少，所以我确信我错过了一些东西，而且它阻止了其他一切的进展。 http://jsfiddle.net/brendanjackson/bf7m7oao/3/

<body>
    <div class=category1>
    <h1>Wellness</h1>
    <input type="text" id = "inputtext">
    <button onClick='buttonClicked()'>Click Me!</button>
    <ul id="myText"></ul>
    </div>
</body>



function buttonClicked() {
    var myText = document.getElementById('myText');
    var inputtext = document.getElementById('inputtext').value  ;
        myText.innerHTML += "<li>"+inputtext+"</li>";

}

我知道我并没有按照预期的方式使用meteor，但我还没有达到那个级别，我想熟悉API并将其用于测试。我只想让我的按钮按照它在使用Meteor时的JS小提琴的方式工作（并了解如何）。那里有谁可以帮我解决这个问题？

PS：我正努力在这个网站上提问，所以除了我的问题之外，任何帮助都会非常感激。非常感谢你！

Answer 1

布伦丹，

您需要做的是将HTML放在.html文件中的模板中，如下所示：

<body>
  {{brendansTemplate}}
</body>

<template name="brendansTemplate">
    <div class=category1>
      <h1>Wellness</h1>
      <input type="text" id = "inputtext">
      <button id="btnBrendan">Click Me!</button>
      <ul id="myText"></ul>
    </div>
</template>

...然后在相应的* .js文件中创建一个：

Template.brendansTemplate.events({
  'click #btnBrendan': function() {
      var myText = document.getElementById('myText');
      var inputtext = document.getElementById('inputtext').value  ;
      myText.innerHTML += "<li>"+inputtext+"</li>";       }
});

我建议您阅读here中的部分Meteor信息。享受学习流星 - 我认为这是一个很棒的框架。

Answer 2

这与meteor无关，但你可以将你的函数包装在脚本标签中，如下所示：

<script>
function buttonClicked() {
var myText = document.getElementById('myText');
var inputtext = document.getElementById('inputtext').value  ;
    myText.innerHTML += "<li>"+inputtext+"</li>";
}
</script>

即使您不使用流星，也应该允许您的JavaScript运行。

Answer 3

更流行的方式：

<强> HTML

将html包装在模板中。 Meteor将自行提供<html>和<body>部分。

<template name="myTemplate>
  <div class=category1>
    <h1>Wellness</h1>
    <input type="text" id="inputtext">
    <button>Click Me!</button>
    <ul id="myText"></ul>
  </div>
</template>

js：

Template.myTemplate.events({
  'click button': function(ev){
    var myText = document.getElementById('myText');
    var inputtext = document.getElementById('inputtext').value;
    myText.innerHTML += "<li>"+inputtext+"</li>";
  }
});

要更加流行，可以使用Sesssion变量和辅助函数，而不是直接操作DOM。

我的代码在Meteor中无法正常工作，但却适用于JS小提琴

3 个答案: