【问题标题】:Meteor jQuery initializationMeteor jQuery 初始化
【发布时间】:2015-10-09 22:07:35
【问题描述】:

我正在使用 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
                }
            }); 
        });
    }
})

【问题讨论】:

    标签: jquery meteor meteor-blaze


    【解决方案1】:

    你是对的,当页面加载时,onRendered 只会被调用一次。

    如果您想在图像数据更改时重新运行它,您必须使用ReactiveVarAutorun 功能使其响应式工作

    【讨论】:

    • 是的,我一直在看 tracker.autorun。我编辑了上面的代码。什么都没有发生。我还需要在自动运行中使用某种反应性变量吗?像会话或反应变量?知道模板被渲染后,tracker.autorun 不会响应式地在其中初始化 jquery?
    • 您必须将数据保存到 Session 或 ReactiveVar,如果您使用 Session.getReactiveVar.set,这些东西会触发自动运行
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多