Meteor jQuery initialization

Question

I'am using CollectionFS and jonblum:jquery-cropper packages. Whenever user uploads a new photo the old one is deleted on the server and the new one is inserted. However, the cropper is gone. The cropper is initialized in template.onRendered and I thought it should be initialzed everytime the template is rendered. Am I wrong? Sorry, I'am still a newbie :)

<template name="createProfile">
  <div class="row">
    <div class="col s6">
      {{#each uploads}}
        <div class="image-view">    
          {{#if isImage}}
            <img class="responsive-img" src="{{this.url store='images'}}"           alt="Profile picture">
          {{else}}
            <p>Sorry this file is not image</p>
          {{/if}}
        </div>
      {{/each}}
    </div>
    <div class="col s6">
      <div class="file-field input-field">
        <div class="btn">
          <span>Photo</span>
          <input type="file" name="image" class="fileInput">
        </div>
        <div class="file-path-wrapper">
          <input class="file-path validate" type="text">
        </div>
      </div>
    </div>
  </div>
</template>

Template.createProfile.onRendered(function() {
  this.autorun(function() {
    Tracker.afterFlush(function() {
        this.$('.image-view > img').cropper({
            aspectRatio: 1/ 1,
            autoCropArea: 0.8,
            strict: true,
            responsive: true,
            guides: true,
            dragCrop: true,
            cropBoxMovable: true,
            cropBoxResizable: true
        });
    }.bind(this));
  }.bind(this));
});

Template.createProfile.helpers({
    uploads: function() {
        return Images.find({owner: Meteor.user().username});
    }
});

Template.createProfile.events({
  'change .fileInput': function(event, template) {
        FS.Utility.eachFile(event, function(file) {
            var newFile = new FS.File(file);
            var currentUser = Meteor.userId();
            var currentUserName = Meteor.user().username;
            newFile.owner = currentUserName;
            if(!currentUser) {
                throw new Meteor.Error('not-logged-in', "You're not logged-in.");
            }
            if(Images.find({owner: Meteor.user().username}).count() > 0) {
                Meteor.call('deleteUserPhotos', function(error) {
                    if(error) {
                        console.log(error.reason);
                    } else {
                        console.log("previous photo is deleted")
                    }
                });
            }
            return Images.insert(newFile, function (err) {
                if(err) {
                    console.log(err);
                } else {
                    // do something here
                }
            }); 
        });
    }
})

Answer 1

You're right the onRendered will be call only once when the page is loaded.

If you want to rerun it when the image data is changed, you have to use ReactiveVar or Autorun feature to make it work reactively