Question

我有一个Meteor应用程序，用于创建项目列表。我有一个表示单个项目的Meteor模板。让我们说我的应用程序中的逻辑创建一个包含4个项目的列表。我还在页面上有一个按钮，每次按下该按钮都应该将项目插入到页面上现有列表的末尾。在没有将项目添加到数据库的情况下，最好的方法是什么（理想情况下我想重新使用现有的Meteor项目模板）？

Answer 1

您仍然可以使用集合而不向数据库发送任何内容。如果使用null创建集合，则该集合将仅在会话期间存在于浏览器中。

Items = Meteor.Collection(null); // Somewhere in your client code

来自docs

如果您传递null作为名称，那么您将创建一个本地集合。它在任何地方都没有同步;它只是一个支持Mongo风格的查找，插入，更新和删除操作的本地暂存器。（在客户端和服务器上，此暂存器是使用Minimongo实现的。）

修改

这是合并两个集合的good example。这就是本地集合的样子

dbtest.js

serverCollection = new Meteor.Collection('dbtest_names');

if (Meteor.isClient) {

  localCollection = new Meteor.Collection(null);

  Template.hello.helpers({
    names: function () {
      var namesFromDB = serverCollection.find().fetch();
      var localNames = localCollection.find().fetch();
      var allNames = namesFromDB.concat(localNames);
      return _.sortBy(allNames, function (curr) {
        return curr.name;
      });
    }
  });

  Template.hello.events({
    'click button': function () {
      localCollection.insert({ name: 'will' });
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
    if (serverCollection.find().count() === 0) {
      // insert default entries
      serverCollection.insert({ name: 'peter' });
      serverCollection.insert({ name: 'scotty' });
      serverCollection.insert({ name: 'zelda' });
    }
  });
}

dbtest.html

<head>
  <title>dbtest</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1> {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  {{#each names}}
    <h3>{{name}}</h3>
    <br>
  {{/each}}
</template>

Answer 2

您应该为项目列表定义一个帮助程序，它只列出数据库中的所有项目。类似的东西：

Template.Items.helpers({
    all_items: function () {
        return Items.find();
    }
})

对于按钮，您应该定义一个单击事件，该事件将触发单击并将项目插入到项目集合中。由于all_items帮助器是一个反应源，它将自动更新并在项目模板中显示新添加的项目。

Template.Items.events({
    'click #add_item': function (event,template) {
        //catch all the item arguments

        Items.insert(item)
     }
})

Answer 3

为了完成这项任务，您需要做四件事：项目列表模板，单个项目模板，用于从项目列表模板上的数据库中获取项目列表的模板助手，以及用于您的事件处理程序在项目列表模板上添加项目按钮。

<template name="itemList">
    <button id="addItem" type"button">Add Item</button>
    {{#each items}}
        {{> item}}
    {{/each}}
</template>

<template name="item">
    // Display anything pertinent to an item here
</template>

这是您的两个模板，第一个是项目列表模板，第二个是单个项目模板。

Template.itemList.events({
    'click #addItem': function(event, template) {
        var item = {}; // Add attributes to the item object as necessary
        Items.insert(item);
    }
});

Template.itemList.helpers({
    items: function() {
        return Items.find({});
    }
});

这些是您的项目列表模板事件处理程序和模板帮助程序。当按下Items按钮时，事件处理程序会将新项目插入addItem集合，模板帮助程序将检索所有项目的列表，供您在项目列表模板中使用{{#each}} {{ 1}}声明。

我可以利用现有的Meteor模板插入新项目吗？

3 个答案: