CODEWITHSUNDEEP
javascriptjqueryhtmlmeteor
wyc
wyc

Reputation: 55263

How to make helper-generated HTML to work with jQuery (Meteor)?

In order to fix a text duplication bug with contenteditable areas and Meteor I did following:

document_page.js:

Template.documentPage.helpers({
  contenteditable: function() {
    return '<div class="content" contenteditable="true">' + this.content + '</div>' 
  },

document_page.html:

<div class="editor">
  <input class="title" type="text" value="{{title}}">
  {{{contenteditable}}}
</div>

The problem now is jQuery no longer works with the HTML generated by {{contenteditable}}

Example:

Template.documentPage.rendered = function() {
   $('.content').addClass('test') // <--this does nothing

How can I fix this?

Upvotes: 0

Views: 193

Answers (1)

Ethaan
Ethaan

Reputation: 11376

Hi alex the code actually works, just remove +this.content' +to +'click to start editing on the div' +`, since you are creating the object without content.

We replace this.content with this.

var finde = Documents.findOne({_id:this._id})
return '<div class="content" contenteditable="true">' +finde.content + '</div>'

And put the Template where this helper is used inside a waitOn on the Route.

waitOn:function(){
  if(this.ready()){
    //render the template
   }else{
    //render the loading template
  }
}

if you console.log(this).

You will get object {}.

Upvotes: 1

Related Questions