流星 jQuery 初始化

Question

我正在使用 CollectionFS 和 jonblum:jquery-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 or Autorun 功能使其响应式工作

流星 jQuery 初始化

Meteor jQuery initialization

jquery

meteor

meteor-blaze