Question

更新：我添加了额外的代码以便澄清，用* NEW *注释。我被要求澄清这段代码的作用。将一系列数据输入到称为posts的集合中。在postsList模板上，当timeToEnable字段小于当前时间时输出代码，这允许我们使用this javascript时间选择器基于指定日期延迟发布。我在/client/posts/post_edit.js中的问题，我试图从集合中的数据设置其中一个选择器的值，我不知道如何在javascript中检索但是我在html中使用{{fieldHere并使用postsList模板帮助程序。

希望这些新代码和信息有所帮助。

原始问题。

我有一个表单，在posts集合中提交了5个字段。我有一个编辑页面，自动填充图块和内容。但是我有两个单独的日期/时间选择器。当我在编辑页面上时，我可以通过特定的posts数据正确设置日期/时间选择器。我无法使用{{date}}以常规方式输出日期/时间数据，因为它以特定格式存储2015-05-25T17:50:00.000Z我在集合中创建了单独的字段，使用datepicker函数分隔日，月，年

此功能允许我设置日期选择器。

picker.set('select', new Date(year, month, date));

我的问题在于根据我正在编辑的帖子使用的ID获取年，月和日期数据。我可以使用{{title}}将它们放在html中，但我不知道如何识别ID，并在集合中抓取该帖子，并允许我像上面一样使用picker.set。

以下是我的代码，我认为最能说明我到目前为止的内容。

客户端 /client/posts/post_submit.js

Template.postSubmit.events({
  'submit form' : function(e){
    e.preventDefault();
    var post = {
    title: $(e.target).find('[name=title]').val(),
    postContent: $(e.target).find('[name="postContent"]').val(),
    timeToEnable: new Date(year, month, day, hours, minutes),
    timeDisplay : timeDisplay,
    year : year,
    month : month,
    day : day,
    hours : hours
  };

  ////console.log(post.timeToEnable);

  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});


  });

  }

});

/client/posts/posts_list.html *新*

<template name="postsList">
  <div class="posts page">
    {{#each posts}}
    {{> postItem}}
    {{/each}}
  </div>
</template>

/client/posts/post_item.html *新*

<template name="postItem">
  {{> dashboard}}
  <article>
    <div class="post">
      <div class="post-content">
        <h1>{{title}}</h1>
        <h3>{{timeDisplay}}</h3>
        <p>{{{postContent}}}</p>
        <a href="{{pathFor 'postPage'}}">View</a>
        {{#if ownPost}}<a class="editPost" href="{{pathFor 'postEdit'}}">Edit</a>{{/if}}


      </div>
    </div>
  </article>
</template>

/client/posts/posts_list.js *新*

Template.postsList.helpers({
  posts: function() {
    //return Posts.find({}, {sort: {submitted: -1}});
    //
    var data = new ReactiveDict();

    data.set("now", new Date());

    return Posts.find({timeToEnable: {$lt: data.get("now")}});


  }
});

/client/posts/post_edit.html

<template name="postEdit">

  {{> dashboard}}

  <div class="container">



  <form id="editForm">


    <div class="postTitle">
      <label class="titleLabel">Press Release Title.</label>
      <div class="input">
        <input name="title" id="title" type="text" value="{{title}}" placeholder=""/>
      </div>
    </div>

    <div class="postTime">
      <label class="titleLabel">Pick A time to post</label>
      <div class="input">
        <input class="timepicker" name="" id="" type="text" value="Click for a Time to Post" placeholder=""/>
      </div>
    </div>

    <div class="postDay">
      <label class="">Pick A Date to post</label>
      <div class="input">
        <input class="datepicker" name="" id="" type="text" value="Click for a Date to Post" placeholder=""/>
      </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>

    <div id="submit">


    <input type="submit" value="Submit"/>

  </div>

  <div class="deletePost">
    <a class="btn btn-danger delete" href="#">Delete post</a>

  </div>

  </form>


  </div>
</template>

这是我想要检索年，月，日期的帖子字段的地方。所以我可以将选择器设置为该日期，所有这些都基于特定的帖子ID。

/client/posts/post_edit.js

这是我需要根据指定的ID输出集合中字段的关键部分

Template.postEdit.rendered = function(){
  picker.set('select', new Date(year, month, day));
}

LIB

使用{{title}}时，此路线会将代码输出到html。

/lib/router.js

Router.route('/posts/:_id/edit', {
  name: 'postEdit',
  data: function() { return Posts.findOne(this.params._id); }
});

lib/collections/posts.js *新*

Posts = new Mongo.Collection('posts');

Posts.allow({
  update: function(userId, post) { return ownsDocument(userId, post); },
  remove: function(userId, post) { return ownsDocument(userId, post); },
});

Posts.deny({
  update: function(userId, post, fieldNames) {
    // may only edit the following two fields:
    return (_.without(fieldNames, 'title', 'postContent','timeToEnable','timeDisplay','year','month','day','hours').length > 0);
  }
});

Meteor.methods({
  postInsert: function(postAttributes) {
    check(Meteor.userId(), String);
    check(postAttributes, {
      title: String,
      postContent: String,
      timeToEnable: Date,
      timeDisplay:String,
      year: Number,
      month: Number,
      day: Number,
      hours: Number

    });
    var user = Meteor.user();
    var post = _.extend(postAttributes, {
      userId: user._id,
      author: user.username,
      submitted: new Date()
    });
    var postId = Posts.insert(post);
    return {
      _id: postId
    };
  }
});

服务器 〜/服务器/ publications.js`

Meteor.publish('posts', function() {
  return Posts.find();
});

所以我想在渲染模板时将posts的集合字段抓取到postEdit中，这将设置日输入选择器的值。

提前感谢您的帮助。

Answer 1

这最终最终为我工作了。

<强>客户端 /posts/post_edit.js

Template.post_edit.rendered = function(){
var year = (postObject.year);
var month = (postObject.month) -1;
var day = (postObject.day);
var hours = (postObject.hours);

var $input = $('.datepicker').pickadate();
var $inputTime = $('.timepicker').pickatime();


// Use the picker object directly.
var picker = $input.pickadate('picker');
var pickerTime = $inputTime.pickatime('picker');


picker.set('select', new Date(year, month, day));// Get on screen image
pickerTime.set('select', [hours,0]);// Get on screen image
}

<强> LIB /lib/router.js

Router.route('/posts/:_id/edit', {
  name: 'postEdit',
  data: function() {
  postObject = Posts.findOne(this.params._id);


    return postObject;

    }
});

从流星渲染模板

1 个答案: