试图在模板中预览图像,使用弹弓在流星中使用模板助手

时间:2015-02-20 20:12:53

标签: javascript meteor meteor-slingshot

我遇到的问题是应该从模板助手渲染的{{img}}似乎无法正常工作,我正在使用meteor-slinghsot pacakage。

我有以下模板助手

Template.postSubmit.helpers({
    url: function () {
      //if we are uploading an image, pass true to download the image into cache
      //this will preload the image before using the remote image url.
      var hello = this.uploader.url(true);
      console.log(hello);
      return this.uploader.url(true);
    }
});

我有以下模板事件

   Template.postSubmit.events({
  'submit form': function(e) {
    e.preventDefault();

    $('#textArea.editable').editable({
  success: function(response, newValue) {

    alert("test");

}
});

    var post = {
      title: $(e.target).find('[name=title]').val(),
      postContent: $(e.target).find('[name="postContent"]').val(),
      image: imageLoad
    };

    Meteor.call('postInsert', post, function(error, result) {
      // display the error to the user and abort
      if (error)
        return alert(error.reason);

      // show this result but route anyway
      if (result.postExists)
        alert('This link has already been posted');

        Router.go('postPage', {_id: result._id});




      });
    },
    'change #fileUpload':function(event, template){
      event.preventDefault();

      var uploader = new Slingshot.Upload("myFileUploads");


      var error = uploader.validate(document.getElementById('fileUpload').files[0]);




if (error) {
  console.error(error);
}

      var file = event.currentTarget.files[0];
      console.log(file.name);

      uploader.send(document.getElementById('fileUpload').files[0], function (error, downloadUrl) {

        console.log(error);
        console.log(downloadUrl);

      imageLoad = downloadUrl;


      Meteor.users.update(Meteor.userId(), {$push: {"profile.files": downloadUrl}});



      });







    }

});

我有以下html模板

<template name="postSubmit">
  {{> dashboard}}
  <p id="textArea" class="editable" data-type="textarea" data-placeholder="Enter text" data-emptytext="Click to enter text" data-rows="4">{{textAreaContent}}</p>
  <img src={{url}}/>

  <form>
    <!-- <div>
      <label for="url">URL</label>
      <div>
        <input name="url" id="url" type="text" value="" placeholder="Your URL" class="form-control"/>
      </div>
    </div> -->
    <div class="postTitle">
      <label class="titleLabel">Press Release Title</label>
      <div class="input">
        <input name="title" id="title" type="text" value="" placeholder="Title Here."/>
      </div>
    </div>
    <div>
      <div class="textarea">
        <label class="contentLabel">Press Release content.</label>

        <!-- <input name="postContent" id="postContent" type="text" value="" placeholder="Enwave has released a..."/> -->
        <textarea name="postContent" id="postContent" type="text"></textarea>
      </div>
    </div>
    <input id="fileUpload" type="file"/>

    <input type="submit" value="Submit"/>
  </form>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progress}}%;">
      <span class="sr-only">{{progress}}% Complete</span>
    </div>
  </div>
</template>

1 个答案:

答案 0 :(得分:0)

我不确定您希望使用您的代码实现什么,但这就是您的模板帮助程序无法正常工作的原因:

var hello = this.uploader.url(true);

this.uploader未定义。它必须是发送文件的Slingshot.Upload对象。