javascript - 在 Meteor 中缩短收集字段以进入

Question

在我显示最新帖子的 Meteor 项目主页中，我只想显示帖子的前 140 个字符，然后显示一个 Read more 按钮。

说我有

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

并且 Posts 有一个 .body 字段，这是我存储正文的地方。然后在模板助手文件中，我想是我必须做手术的地方:

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

我想我可能必须使用 UnderscoreJS 的 _.each() 和 jQuery 的 .substring()， 但是我将如何去做并将它们放在一起就是问题所在。

Answer 1

您可以使用 CSS3 和(纯)JavaScript 完全解决这个问题。

CSS3 引入了一个新属性 text-overflow，如下所述: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

您可以将其与 div 或 span 的有限宽度/高度结​​合使用，然后在其后添加“阅读更多”链接。该链接只需更改宽度/高度(如果需要，可以使用动画)。

或者，如果你真的想为此使用 meteor ，那么你可以在你的查找中添加一个 transform 函数:

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

然后只需使用 {{ short }} 代替 {{ body }}。