我有一个具体的问题。我已经使用流星构建了一个应用程序,它基本上在主屏幕上显示了一些实体,这些实体由 Jquery 可排序处理。插入。没什么特别的。
我的行为如下。我有一些事件通过模板机制绑定到每个实体,所以我有 mouseenter,mouse over。
在 jquery 插件中定义了一个占位符。
每当我开始拖放任何实体,并且占位符从其原始位置移动并且从 jquery 触发 onChange 事件时,该实体就会不受流星事件的约束。
但是,如果我通过 jquery 绑定它,它就不会发生。有谁知道会发生什么?
这个问题可以很简单地复制。使用 jQuery 中的可排序示例,提取模板中的 ul create 部分。
<head>
<title>auth</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<ul id="sortable">
{{>items}}
</ul>
</template>
<template name="item">
{{#if clipped}}
{{else}}
{{/if}}
<div class="india">
<li>Item {{this.id}}</li>
</div>
</template>
<template name="items">
{{#each items}}
{{>item}}
{{/each}}
<div class="empty"/>
<div class="empty"/>
<div class="empty"/>
<div class="empty"/>
<div class="empty"/>
<div class="empty"/>
</template>
js文件有
Template.hello.rendered = function () {
$("#sortable").sortable({
placeholder:"place"
});
};
Template.items.items = function () {
var gigi = [];
for (i=0;i<5;i++){
gigi[i]={id:i};
}
return gigi;
}
Template.item.clipped=function(){
return true;
};
Template.item.events({
'mouseenter .india' : function () {
console.log(this.id);
}
});
和css文件:
.india{
height:80px;
width:80px;
background-color: red;
margin:5px;
float:right;
}
.place{
height:80px;
width:80px;
background-color: blue;
margin:5px;
float:right;
}
.empty{
height:80px;
width:80px;
background-color: yellow;
margin:5px;
float:right;
}
我在项目模板中包含了帮助器 Template.item.clipped 的事实导致移动后的项目通过模板 Template.item.events 机制释放绑定到它的所有事件。