How do I use X-editable on dynamic fields in a Meteor template now with Blaze?

Question

I had x-editable working in Meteor 0.7.2 but since upgrading to 0.8.0 it no longer renders correctly. I tend to end up with a bunch of Empty tags. This is frustrating becaus

Answer 1

If Andrew's answer worked for you, and you have a lot of fields like this, you may find convenient to use a function to create the required templates. Here is an example

and in the js:

Template.main.editables = function(){
  return Objects.find({});
};

function xeditFactory(collection, template, field){
  template.content = function(){ return this[field]; };
  template.id      = function(){ return 'xedit_'+this._id+'_'+field; };
  template.rendered = function(){
    var container = this.$('#xedit_'+this.data._id+'_'+field);
    console.log(container);
    var grabValue = function() {
      return $.trim(container.text());
    };
    return container.editable({
      value: grabValue,
      display: function() {},
      success: (function(_this) {
        return function(response, newValue) {
          var set = {};
          set[field]=newValue;
          collection.update(_this.data._id, {$set:set});
          return Meteor.defer(function() {
            return container.data('editableContainer').formOptions.value = grabValue;
          });
        };
      })(this)
    });
  };
}

xeditFactory(Objects, Template.editable1, 'field1');
xeditFactory(Objects, Template.editable2, 'field2');