Question

我正在使用CollectionFS和jonblum：jquery-cropper软件包。每当用户上传新照片时，旧照片将在服务器上删除，并插入新照片。但是，收割机已经消失了。 cropper在template.onRendered中初始化，我认为每次渲染模板时都应该初始化它。我错了吗？对不起，我还是个新手：）

<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

你是对的，onRendered只会在加载页面时调用一次。

如果您想在更改图像数据时重新运行它，则必须使用ReactiveVar或Autorun功能才能使其有效地工作

Meteor jQuery初始化

1 个答案: