6

私はMeteorを初めて使用しますが、本当に楽しんでおり、これが私が構築している最初のリアクティブアプリです.

ユーザーがクリックしたときに要素を削除する方法を知りたいですか、.mainそれとも既存のテンプレート (メイン コンテンツを含む) を削除してから別の流星テンプレートに置き換える方がよいでしょうか? このようなことは、html/js アプリ (ユーザーのクリック -> el を dom から削除) ではシンプルで簡単ですが、ここではそれほど明確ではありません。

私はただ学び、ベストプラクティスについての洞察を求めています。

//gallery.html
<template name="gallery">
  <div class="main">First run info.... Only on first visit should user see  this info.</div>
  <div id="gallery">
    <img src="{{selectedPhoto.url}}">
  </div>    
</template>  

//gallery.js
firstRun = true;

Template.gallery.events({
  'click .main' : function(){
    $(".main").fadeOut();
    firstRun = false;
  }
})

if (Meteor.isClient) {    

  function showSelectedPhoto(photo){    
    var container = $('#gallery');
    container.fadeOut(1000, function(){          
      Session.set('selectedPhoto', photo);
      Template.gallery.rendered = function(){
        var $gallery = $(this.lastNode);
        if(!firstRun){
          $(".main").css({display:"none"});
          console.log("not");
        }
        setTimeout(function(){
          $gallery.fadeIn(1000);
        }, 1000)
      }        
    });      
  }

  Deps.autorun(function(){
    selectedPhoto = Photos.findOne({active : true});
    showSelectedPhoto(selectedPhoto);        
  });

  Meteor.setInterval(function(){    
       selectedPhoto = Session.get('selectedPhoto');   

       //some selections happen here for getting photos.

    Photos.update({_id: selectedPhoto._id}, { $set: { active: false } });
    Photos.update({_id: newPhoto._id}, { $set: { active: true } });    
  }, 10000 );
}
4

3 に答える 3

11

要素を条件付きで非表示または表示する場合は、Meteor のリアクティブ動作を使用する必要があります: テンプレートに条件を追加します。

<template name="gallery">
  {{#if isFirstRun}}
  <div class="main">First run info.... Only on first visit should user see  this info.</div>
  {{/if}}
  <div id="gallery">
    <img src="{{selectedPhoto.url}}">
  </div>    
</template>

次にヘルパーをテンプレートに追加します。

Template.gallery.isFirstRun = function(){
   // because the Session variable will most probably be undefined the first time
   return !Session.get("hasRun");
}

クリック時のアクションを変更します。

Template.gallery.events({
  'click .main' : function(){
    $(".main").fadeOut();
    Session.set("hasRun", true);
  }
})

要素をフェードアウトすることはできますが、要素を非表示にしたり削除したりして、次に戻ってくるようにする代わりに、二度と戻ってrenderこないようにします。

レンダリングは、Sessionリアクティブな変数を変更することによってトリガーされます。

于 2013-07-20T05:36:30.590 に答える
3

条件付きテンプレートを使用する方が良いアプローチだと思いますが、

{{#if firstRun }}
  <div class="main">First run info.... Only on first visit should user see  this info.</div>
{{else}}
  gallery ...
{{/if}}

DOM の更新をトリガーするように、firstRun をセッション変数にする必要があります。

于 2013-07-20T05:24:58.823 に答える
2

Meteor はリアクティブです。データが変更されたときに DOM を再描画するためのロジックを記述する必要はありません。X ボタンがクリックされると Y がデータベースから削除されるというコードを書くだけです。それでおしまい; インターフェイスや DOM の変更、テンプレートの削除や再描画などに煩わされる必要はありません。テンプレートの基礎となるデータが変更されるたびに、Meteor は更新されたデータでテンプレートを自動的に再レン​​ダリングします。これは Meteor のコア機能です。

于 2013-07-20T05:26:33.847 に答える