gpt4 book ai didi

jquery - Meteor ,使用 jquery sortable 导致模板未绑定(bind)

转载 作者:行者123 更新时间:2023-12-01 01:49:57 24 4
gpt4 key购买 nike

我有一个具体问题。我已经使用meteor构建了一个应用程序,它基本上在主屏幕上显示了一些实体,并且这些实体由Jquery可排序处理。插入。没什么特别的。

我的行为如下。我有一些事件通过模板机制绑定(bind)到每个实体,所以我有鼠标输入,鼠标悬停。

在 jquery 插件中定义了一个占位符。

每当我开始在任何实体上拖放,并且占位符从其原始位置移动并且从 jquery 触发 onChange 事件时,该实体就会与 meteor 事件解除绑定(bind)。

但是,如果我通过 jquery 绑定(bind)它,则不会发生。有谁知道会发生什么吗?

这个问题可以非常简单地复制。使用 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 机制绑定(bind)到它的所有事件。

最佳答案

Meteor 0.8.0 有一个完全重写的模板引擎。名叫布莱兹。它应该可以解决人们可能遇到的任何 jQuery 问题。

查看文档 http://docs.meteor.com特别是关于使用 blaze 的 wiki 页面。 https://github.com/meteor/meteor/wiki/Using-Blaze

关于jquery - Meteor ,使用 jquery sortable 导致模板未绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13130881/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com