我在Html文件中有一个标准模板,如:
<template name="cards">
{{#each all_cards}}
{{> card_item}}
{{/each}}
</template>
<template name="card_item">
<div class="card" style="left:{{position.x}}px; top:{{position.y}}px">
{{title}}
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
我想让卡(css选择器.card)变得可以用JQuery拖动.现在,由于Meteor使用模板自动更新DOM,我何时以及如何知道在哪里调用.draggable()?
编辑:这是迄今为止我的解决方案,使其他客户端的待定移动可见与摆动动画(使用CSS3):
Template.card_item.events = {
'mouseover .card': function (e) {
var $target = $(e.target);
var $cardContainer = $target.hasClass('card') ? $target : $target.parents('.card');
$cardContainer.draggable({containment: "parent", distance: 3});
},
'dragstart .card': function (e) {
Session.set("dragging_id", e.target.id);
$(e.target).addClass("drag");
pos = $(e.target).position();
Events.insert({type: "dragstart", id:e.target.id, left: pos.left, top: pos.top});
},
'dragstop .card': function (e) {
pos = $(e.target).position();
Events.insert({type: "dragstop", id:e.target.id, left: pos.left, top: pos.top});
Cards.update(e.target.id, …Run Code Online (Sandbox Code Playgroud) 我知道使用模板可以显示多个文档,其属性如下:
// html
<template name="hello">
{{#each greetings}}
{{message}}
{{/each}}
</template>
// js
Template.hello.greetings = function() {
return Greetings.find();
}
Run Code Online (Sandbox Code Playgroud)
其中显示了每个问候语找到的Greeting.message.
我的问题是如何只将这个模板用于一个文档?(包括没有可用的文件)
从javascript方面我会使用类似的东西 return Greetings.findOne({'id' : Session.get("greeting_id")});
但是在使用模板时:
<template name="hello">
{{message}}
</template>
Run Code Online (Sandbox Code Playgroud)
抛出错误:Uncaught TypeError:无法读取未定义的属性"message"
现在我在JS端使用这个,使用下面的@ tom-wijsman建议的模板:
Template.hello.greeting = function() {
var greeting = Greetings.findOne({'id' : Session.get("greeting_id")})
if (greeting)
return greeting;
return {message: ""};
}
Run Code Online (Sandbox Code Playgroud) meteor ×2