2016-06-16 2 views
0

Прямо сейчас {post.htmlBody} будет отображаться на отдельной странице сообщения, но не в представлении «Список сообщений». Первый блок кода - это мой CustomPostsItem.jsx. Вы увидите под тегами h3, которые я пытаюсь отобразить {post.htmlBody}, как определено в верхней части. Это не заполняется, когда CustomPostsItem.jsx вызывается во втором блоке кода, который является PostsList.jsx. Он заполняется и отображается правильно, когда CustomPostsItem.jsx вызывается в третьем блоке кода, который является PostsPage.jsx. Это означает, что он не отображается на моей домашней странице, но будет отображаться на отдельной странице сообщений, даже если тот же CustomPostsItem.jsx вызывается одновременно. Я также пробовал просто {post.body} вместо htmlBody, но то же самое происходит.Как я могу отобразить {post.body} в представлении «Список сообщений» в Meteor Telescope Nova?

import React, { PropTypes, Component } from 'react'; 

class CustomPostsItem extends Telescope.components.PostsItem { 

    render() { 

    ({UsersAvatar, UsersName, Vote, PostsStats, PostsThumbnail} = Telescope.components); 

    const post = this.props.post; 
    const htmlBody = {__html: post.htmlBody}; 

    let postClass = "posts-item"; 
    if (post.sticky) postClass += " post-sticky"; 

    // ⭐ custom code starts here ⭐ 
    if (post.color) { 
     postClass += " post-"+post.color; 
    } 
    // ⭐ custom code ends here ⭐ 

    return (
     <div className={postClass}> 

     <div className="posts-item-vote"> 
      <Vote post={post} currentUser={this.props.currentUser}/> 
     </div> 

     {/*post.thumbnailUrl ? <PostsThumbnail post={post}/> : null*/} 

     <div className="posts-item-content"> 

      <h3 className="posts-item-title"> 
      <a className="posts-item-title-link" href={Posts.getLink(post)} target={Posts.getLinkTarget(post)}>{post.title}</a> 
      {this.renderCategories()} 
      </h3> 

      <div className="posts-page-body" dangerouslySetInnerHTML={htmlBody}></div> 

     </div> 

     </div> 
    ) 
    } 
}; 

export default CustomPostsItem; 
import React from 'react'; 

const PostsList = ({results, currentUser, hasMore, ready, count, totalCount, loadMore, showHeader = true}) => { 

    // console.log(results); 
    // console.log(ready); 
    // console.log(hasMore); 
    // console.log(totalCount); 
    // console.log(count); 

    if (!!results.length) { 
    return (
     <div className="posts-list"> 
     {showHeader ? <Telescope.components.PostsListHeader /> : null} 
     <div className="posts-list-content"> 
      {results.map(post => <Telescope.components.PostsItem post={post} currentUser={currentUser} key={post._id}/>)} 
     </div> 
     {hasMore ? (ready ? <Telescope.components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} /> : <Telescope.components.PostsLoading/>) : <Telescope.components.PostsNoMore/>} 
     </div> 
    ) 
    } else if (!ready) { 
    return (
     <div className="posts-list"> 
     {showHeader ? <Telescope.components.PostsListHeader /> : null} 
     <div className="posts-list-content"> 
      <Telescope.components.PostsLoading/> 
     </div> 
     </div> 
    ) 
    } else { 
    return (
     <div className="posts-list"> 
     {showHeader ? <Telescope.components.PostsListHeader /> : null} 
     <div className="posts-list-content"> 
      <Telescope.components.PostsNoResults/> 
     </div> 
     </div> 
    ) 
    } 

}; 

PostsList.displayName = "PostsList"; 

module.exports = PostsList; 
import React from 'react'; 

const PostsPage = ({document, currentUser}) => { 

    const post = document; 
    const htmlBody = {__html: post.htmlBody}; 

    return (
    <div className="posts-page"> 

     <Telescope.components.HeadTags url={Posts.getLink(post)} title={post.title} image={post.thumbnailUrl} /> 

     <Telescope.components.PostsItem post={post}/> 

     <div className="posts-page-body" dangerouslySetInnerHTML={htmlBody}></div> 

     {/*<SocialShare url={ Posts.getLink(post) } title={ post.title }/>*/} 

     <Telescope.components.PostsCommentsThread document={post} currentUser={currentUser}/> 

    </div> 
) 
}; 

PostsPage.displayName = "PostsPage"; 

module.exports = PostsPage; 
export default PostsPage; 
+0

Вы должны размещать код :) –

+0

Спасибо Антуану. Я написал много кода, но на самом деле вы смотрите только на несколько строк в каждом блоке. Я опубликовал все файлы, чтобы вы могли видеть объявления наверху. –

ответ

0

body не публикуется на posts.list зрения, является excerpt (чтобы избежать загрузки слишком большого объема данных). Если вы хотите опубликовать body, а также, вы добавить его в Posts.publishedFields.list (см https://github.com/TelescopeJS/Telescope/blob/master/packages/nova-posts/lib/published_fields.js)

Вы можете сделать:

PublicationUtils.addToFields(Posts.publishedFields.list, ["body"]); 

См https://github.com/TelescopeJS/Telescope#publishing-data

+0

получил, спасибо большое! –