Question

我是Meteor的新手，并构建了一个简单的应用程序来学习框架。我正在构建的应用程序让你在小猫的图像上放置文字。

所需的行为是：

用户点击小猫的任何位置，并出现一个让用户输入文字的可信元素。单击元素外部将保存元素，并保持原位。

我遇到的问题：

如果我在应用程序中打开了两个浏览器窗口，并且在一个窗口中单击一只小猫，则两个窗口中都会显示一个空白字段。理想情况下，空字段仅出现在我单击的窗口上。保存一个单词后，应该在两个窗口中都可以看到。

我的问题：

是否有办法将insert文档仅添加到客户端的集合中，然后再使用upsert将文档添加到servert-side集合中？

以下是我的尝试：

我创建了一个存根方法，该方法仅存在于客户端以插入文档。这个问题是，当我点击图像时，会出现一个空白字段，持续一秒钟，然后再次消失。

以下是代码：

图像tags.js

if (Meteor.isClient) {
  var isEditing;

  Template.image.image_source = function () {
    return "http://placekitten.com/g/800/600";
  };

  Template.tag.rendered = function(){
    var tag = this.find('.tag');
    if (isEditing && !tag.innerText) {
      tag.focus();
    }
  }

  Template.image.events({
    'click img' : function (e) {
      if (isEditing) {
        isEditing = false;
      } else {
        isEditing = true;
        var mouseX = e.offsetX;
        var mouseY = e.offsetY;

        // Tags.insert({x:mouseX, y:mouseY});

        // Insert tag on the client-side only.
        // Upsert later when the field is not empty.
        Meteor.call('insertTag', {x:mouseX, y:mouseY});
      }
    },

    'click .tag' : function (e) {
      isEditing = true;
    },

    'blur .tag' : function (e) {
      var currentTagId = this._id;
      var text = e.target.innerText;

      if(text) {
        Tags.upsert(currentTagId, {$set: {name: text}});
      } else {
        Tags.remove(currentTagId);
      }
    }
  });

  Template.image.helpers({
    tags: function() {
      return Tags.find();
    }
  });

  // Define methods for the collections
  Meteor.methods({
    insertTag: function(attr) {
      Tags.insert({x:attr.x, y:attr.y});
    }
  });
}

// Collections
Tags = new Meteor.Collection('tags');

图像tags.html

<head>
  <title>Image Tagger</title>
</head>

<body>
  {{> image}}
</body>

<template name="image">
  <figure>
    <img src="{{image_source}}" />
    <figcaption class="tags">
        {{#each tags}}
          {{> tag}}
        {{/each}}
      </figcaption>
  </figure>
</template>


<template name="tag">
  <div class="tag" contenteditable style="left: {{x}}px; top: {{y}}px;">
    {{name}}
  </div>
</template>

Answer 1

您应该将临时标记（可能还有isEditing var）存储在Session中：

Session.set("isEditing", true);
Session.set("newTag", {x:mouseX, y:mouseY});

您也可以在初始化时通过传递null而不是集合名称来创建本地集合。但是，Session应该适用于您正在做的事情。查看leaderboard以获取示例。

编辑：

<figcaption class="tags">
  {{#each tags}}
    {{> tag}}
  {{/each}}
  {{#with newTag}}
    {{> tag}}
  {{/with}}
</figcaption>

Template.image.newTag = function() {
  return Session.get("newTag");
}

Answer 2

如果您仅在客户端创建集合，则在断开连接时可能会出现问题：您的新文档将不会存储在服务器上。

在我看来，最好的方法是在文档中设置属性“已发布”或“编辑”或“状态”（值已发布/ eiditing / ...）。然后你的发布方法应该返回：

当前用户的所有文件
所有文件“已发布”或未处于“编辑”状态

当用户创建文档时，它存储在服务器上但具有编辑状态。然后，当您保存时，您可以决定发布它，然后所有其他用户将在其订阅中收到该文档。

希望替代解决方案能够帮助您

Meteor JS：如何将文档插入集合中，但仅限于客户端？

2 个答案: