小编Mic*_*öhr的帖子

如何在模板创建的元素上触发JQuery .draggable()?

我在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)

meteor

7
推荐指数
1
解决办法
3985
查看次数

使用模板如何使用{{attribute}}将一个'记录'与使用find()游标的#each进行比较?

我知道使用模板可以显示多个文档,其属性如下:

// 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"

UPDATE

现在我在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

5
推荐指数
1
解决办法
4607
查看次数

标签 统计

meteor ×2