Нов съм в Meteor и създавам просто приложение, за да науча рамката. Приложението, което създавам, ви позволява да поставите думи върху изображение на коте.
Желаното поведение е следното:
Потребителят щраква където и да е върху котето и се появява елемент с възможност за редактиране на съдържание, позволяващ на потребителя да въвежда текст. Щракването извън елемента запазва елемента и той остава на мястото си.
Проблемът, с който се сблъсквам:
Ако имам два отворени прозореца на браузъра с приложението и щракна върху едно коте в един прозорец, празно поле се появява и в двата прозореца. В идеалния случай празното поле ще се появи само в прозореца, върху който съм щракнал. След като дадена дума бъде запазена, тогава in трябва да се вижда и в двата прозореца.
Моят въпрос:
Има ли начин да insert документ в колекция само от страна на клиента и след това да използвате upsert по-късно, за да добавите документа към колекция от страна на сървъра?
Ето какво опитах:
Създадох метод за вмъкване на документа, който съществува само от страна на клиента. Проблемът с това е, че когато щракна върху изображението, празно поле се появява за част от секундата и след това отново изчезва.
Ето кодът:
image-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');
image-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>
