Meteor session.set/get 和 jquery modal答案

【问题标题】：Meteor session.set/get and jquery modalMeteor session.set/get 和 jquery modal
【发布时间】：2014-11-23 17:57:48
【问题描述】：

在刷卡事件之后，会话设置为这个的_id。然后，我将 this._id 传递给在#each 项目中显示一个按钮的助手。单击此按钮后，模式将打开，我可以删除该项目。 HTML 代码：

<template name="territories">
 <ul class="collection">
    {{#each territories}}
         {{> item}}
    {{/each}}
 </ul>
</template>

<template name="item">
 <li class="collection-item hammerDiv">
        {{#if deletable}}
            <a href="#delmodal" class="waves-effect modal-trigger-item btn flat">Cancella</a>
        {{/if}}
        <div>{{name}} - n.{{number}}<a href="{{pathFor 'owners'}}" class="secondary-content">{{owners.length}}</a></div>
  </li>
  <div id="delmodal" class="modal">
        <p>Sei sicuro di cancellare il territorio? Perderai tutte le note.</p>
        <div class="row">
            <a href="#" id="dismiss-cancel" class="waves-effect btn flat modal_close">Annulla</a>
            <a href="#" id="delTerr" class="waves-effect btn flat modal_close">Cancella</a>
        </div>
  </div>

JS代码：

Template.territories.helpers({
    territories : function(){
        return Territories.find();
    }
});

Template.item.helpers({
    deletable : function(){
        var thisTerr = Session.get('deletable-item');
        if (this._id == thisTerr){
            return true;
        }else{
            return false;
        }

    }
});

Template.item.events({
'swipeleft .hammerDiv': function(e, t) {
        e.preventDefault();
        Session.set('deletable-item', this._id);
    }
});

Template.item.rendered = function(){
    //modal
    $('.modal-trigger-item').leanModal();

    //swipe gesture on the item, works fine
    $('li.hammerDiv').hammer({
        drag_min_distance:1,
        swipe_velocity:0.1
    });
};

仅当我在 HTML 中删除 {{#if deletable}} 时，模态才有效：在这种情况下，按钮始终可见并且模态可以正常工作。但是当 Session 设置为 this._id 时，我希望该按钮出现在项目内，然后单击此按钮，显示模式。我认为问题是 DOM 与 Session.set 的反应性。我尝试应用this 和this 建议但没有结果。感谢您的帮助。 ;-)

【问题讨论】：

尝试 console.log 两个 id's in helper 并检查它们是否相同
是的，按钮显示/隐藏工作正常。问题是当我单击按钮时显示模式。模态仅在我不使用 session.set/get 时出现
你的意思是你的“可删除”助手不能正常工作？这就是我写这篇评论时的假设。尝试控制台记录 this._id 和 Session.get 来比较字段，也许这会让你更接近答案
你没有任何事件来支持点击这个标签，你是想通过渲染函数中的那些事件来触发它吗？仅当您尝试分配的那些项目在渲染时可见时，渲染才有效。由于 html 中的 {{#if}} 这些元素不可见
好的，所以问题可能是当.modal-trigger元素不在DOM中时执行您的$('.modal-trigger').leanModal();代码，并且当它插入DOM时没有人初始化它。否则，如果 .modal-trigger 从一开始就在 DOM 中（因为您删除了 {{#if deletable}}），则插件会正确初始化（我想是在 .rendered() 方法中）。能解释一下吗？（类似于@Sindis 所说的......）

标签： javascript jquery meteor

【解决方案1】：

我用过几次的肮脏伎俩是这样的：

Template.item.helpers({
    deletable : function(){
        var thisTerr = Session.get('deletable-item');
        if (this._id == thisTerr){
            setTimeout(function() { $('.modal-trigger').leanModal(); }, 0);
            return true;
        }else{
            return false;
        }

    }
});

以便在 Blaze 更新 DOM 后立即执行初始化插件的代码（当 <a>element 已经呈现时）。

【讨论】：