在Meteor中缩短采集字段以使其进入

Question

In my Meteor project's home page where I am showing the latest post, I would like to show only the first 140 characters of the post and then a Read more -button.

Say I have

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

And Posts has a .body -field which is where I store the main text. Then in the template helpers file I guess is where I have to do surgery:

Template.home.helpers({
    var posts = Posts.find();
    //surgery on all body fields in posts
    posts: posts
});

I figure I have to perhaps use UnderscoreJS' _.each() and the jQuery's .substring() , but how I am going to do it and put it all together is where the problem is.

Answer 1

You could solve this entirely with CSS3 and (pure) JavaScript.

CSS3 introduces a new attribute text-overflow , as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

You could use that in conjunction with a limited width/height of a div or span and then follow that with your "read more" link. The link would need to do nothing more than change the width/height (perhaps with an animation if you want).

Alternatively, if you really want to use meteor for that, then you could add a transform function to your find:

var posts = Posts.find({}, {transform: function(post) {
    post.short = post.body.slice(0,140);
    return post;
});

And then just use {{ short }} in place of {{ body }} .