Question

所以我在使用Meteor的网站，我有一个基本的应用程序设置与主css，html和js。这些文件都运行正常。我有另一个html，我正在使用jquery.load（）加载到div中，并且我有另一个与该html文件关联的js文件 - cm.html和cm.js，如下所示。

<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>

</head>
<body>

     <div id="cm-container">

         {{> addBook}}
        {{> bookshell}}
    </div>
</body>
<template name="bookshell">
 <ul>
  {{#each books}}
   <li>{{subject}}</li>
  {{/each}}
 </ul>
</template>
<template name="addBook">
 <form class="addBookForm">
  <input type="text" class="subject" placeholder="Subject">
  <button type="submit" class="btn btn-primary">add book</button>
 </form>
</template>

和cm.js：

books = new Meteor.Collection("books");

if (Meteor.isClient) {

Template.addBook.events({
  'submit .addBookForm' : function (event, template) {
    event.preventDefault();
    books.insert({
      subject: template.find(".subject").value,
    });
  }
});

Template.bookshell.books = function () {
    return books.find({}, {sort: {subject: 1}});
    };
}

当我通过jquery.load（）将cm.html加载到我的主html文件中时，我收到错误：

未捕获的TypeError：无法读取未定义的属性“事件”

我不确定我做错了什么，因为我的主要js和html中的相同格式工作正常。

Answer 1

我相信你通过使用Session变量而不是jquery.load（）来实现这一点。

例如，在主模板中定义一个Session变量，用于跟踪是否已单击该按钮：

main.js

Template.main.onRendered(function() {
  Session.set("showForm", false);
});

Template.main.events({
  'click .showForm' : function(event) {
      event.preventDefault();
      var showForm = Session.get("showForm");
      Session.set("showForm", !showForm);
}
})

然后您可以使用该会话变量动态隐藏/显示addBook模板：

main.js（或任何客户端js文件）

Template.registerHelper('showForm' function() {
  return Session.get('showForm');
})

在主模板中：

{{#if showForm}}
 {{> addBook}}
{{/if}}

Meteor：在辅助js文件

1 个答案: