3

特定の問題があります。基本的にいくつかのエンティティがメイン画面に表示され、これらのエンティティは Jquery sortable によって処理されます。プラグイン。特に何もありません。

私が持っている動作は次のとおりです。テンプレートメカニズムを介してすべてのエンティティにバインドされたいくつかのイベントがあるため、mouseenter、マウスオーバーがあります。

jquery プラグインでは、プレースホルダーが定義されています。

任意のエンティティでドラッグ アンド ドロップを開始し、プレースホルダーが元の場所から移動し、onChange イベントが jquery からトリガーされると、エンティティは流星イベントからバインド解除されます。

ただし、 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.cliped を項目テンプレートに含めたという事実により、移動後の項目は、テンプレートの Template.item.events メカニズムを介してそれにバインドされていたすべてのイベントを失います。

4

1 に答える 1