Question

在滑动事件之后，会话设置为_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建议。非常感谢您的帮助。 ; - ）

Answer 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>元素已经渲染时）。

Meteor session.set / get和jquery模态

1 个答案: