Aldeed:Tabular problem - templateCell does NOT update on pagination when joining


#1

Hi guys,

I am playing around with client-side joins in combination with aldeed:tabular and reywood:publish-composite and ran into a problem getting custom columnTemplates to work.

The problem is that in the below example the column Template.commentsColumn does NOT refresh correctly when paginating. Strangly postCommentsBadAssButWorks shows the correct data. So I am guessing it is NOT the publication, but the reactivity within the template?

Does anyone have an idea what I am doing wrong?

This is a video I did showing the problem

This is a code-excerpt:
Table Definition

import { Authors, Comments, Posts } from '/lib/collection.js'

export const PostsTable = new Tabular.Table({
  name: 'Posts',
  collection: Posts,
  pub: 'tabular.posts',
  extraFields: [
    'authorId', 
    'commentIds',
  ],
  pageLength: 30,
  columns: [
    {data: '_id', title: '#ID'},
    {data: 'post', title: 'Post'},
    {data: 'postAuthor()', title: 'Author Name'},
    {
      title: 'CommentsIds',
      data: 'this',  // set data for sort-option & template-context!
      tmpl: Meteor.isClient && Template.commentIdsColumn,
      tmplContext: function (rowData) {
        return {
          doc: rowData,
        };
      }
    },
    {data: 'postCommentsBadAssButWorks()', title: 'Comments Collection-Helper (WORKS)'},
    {
      title: 'Comments CustomColumnTemplate (PROBLEM)',
      // data: 'this',  // set data for sort-option & template-context!
      tmpl: Meteor.isClient && Template.commentsColumn,
      // tmplContext: function (rowData) {
      //   return {
      //     doc: rowData,
      //   };
      // }
    },
  ]
})

Collection Helper

// COLLECTION HELPER for tabular!!!
Posts.helpers({
  postAuthor: function() {
    return Authors.findOne(this.authorId).author
  },
  postComments: function() {
    // This does NOT seem to RELOAD in the tempalte
    log(`postComments collection helper`)
    // return Comments.find({_id: { $in: this.commentIds } }).fetch()  does NOT work either
    return Comments.find({_id: { $in: this.commentIds } })
  },
  postCommentsBadAssButWorks: function() {
    // This works but is BAAD
    let html = '<ul>'
    Comments.find({_id: { $in: this.commentIds } }).forEach(function (comment) {
      html += `<li>${comment.comment}</li>`
    })
    html += '</ul>'
    return html
  },
})

Template

<template name="commentsColumn">
  <ul>
    {{#each this.postComments}}
      <li>{{this.comment}}</li>
    {{/each}}
  </ul>  
</template>

#2

I made some progress: more comments are shown when removing this.unblock(), but still there are a lot of comments that are NOT shown in the template.

The solution that works for me is to use a different publication package.

instead of using reywood:publish-composite I went lucky with peerlibrary:meteor-reactive-publish.

Just use this code:

// peerlibrary:meteor-reactive-publish
Meteor.publish('tabular.posts.autorun', function (tableName, ids, fields) {
  this.autorun(function (computation) {
    check(tableName, String)
    check(ids, Array)
    check(fields, Match.Optional(Object))

    const posts = Posts.find({_id: {$in: ids}}, { fields: fields })

    // aggregate authors and comments
    const authorIds = []
    let commentIds = []
    posts.forEach(function (post) {
      authorIds.push(post.authorId)
      commentIds = _.union(commentIds, post.commentIds)
    })
    const authors = Authors.find({ _id: { $in: authorIds }}, { fields: fields } )
    const comments = Comments.find({ _id: { $in: commentIds} }, { fields: fields })

    // return multiple cursors
    return [posts, authors, comments]
  })
})

Closed! :slight_smile: