Meteor Handlebars templates: switching from text to input

Question

One part of my meteor application is a semi-collaborative table where users can edit different rows at the same time. When a user is editing a row, the static text values need to switch to input boxes so that the values can be edited and then saved. I would like a template/helper to do this, essentially I want:

<td>
{{#if iAmEditing}}
   {{foo}}
{{else}}
   <input type="text" name="foo" value="{{foo}}">
</td>

except that there are several columns with different values of "foo" and I don't want to copy and paste this several times. What's the right way to approach this with templates and helpers?

Another approach might be to use the HTML5 contenteditable attribute. Either way, what is the right way to template these values with handlebars?

score 1 · Answer 1 · answered Jun 13 '13 at 22:22

1

You should be able to integrate with Bootstrap Editable

answered Jun 13 '13 at 22:22

cggaurav

565
5
20

Good reference, I'll check it out. – Andrew Mao Jun 14 '13 at 01:38
@AndrewMao I am looking for something similar, let me know if you want work on a Meteor Package, where users can collaborately work on a edit in place document. – cggaurav Jun 17 '13 at 13:45
I don't think you need to do that for a document, there is already [ot.js](https://github.com/Operational-Transformation/ot.js/) for that, and you would not want to write that from scratch. – Andrew Mao Jun 18 '13 at 14:48
First, I have found https://github.com/nate-strauser/meteor-x-editable-bootstrap, which I am using for a collaboratively editable spreadsheet. Second, I am working on https://github.com/mizzao/meteor-sharejs. Check it out at http://documents.meteor.com :) – Andrew Mao Jun 27 '13 at 21:08

score 0 · Answer 2 · answered Jun 27 '13 at 21:13

For reference, an answer to the original question...

As of today, handlebars partials can't accept anything other than a context argument, but helpers can. Hence. you can define a helper that sets up the context for the template:

Coffeescript:

Handlebars.registerHelper "eventCell", (context, field, editable) ->
  return new Handlebars.SafeString(
    Template._eventCell
      _id: context._id
      field: field
      value: context[field]
      editable: editable
  )

Template:

<template name="_eventCell">
    <td><div data-ref="{{field}}" class="{{#if editable}}editable{{/if}}">
        {{value}}
    </div></td>
</template>

Then, I just use the following to render each field:

{{eventCell this "province" iAmEditing}}

I ended up integrating with bootstrap editable, so the template is a little different than my original question. Also, I'm not sure if this is the best way to do it, but it's a lot cleaner than what I had before.

score 0 · Answer 3 · answered May 12 '14 at 21:41

0

meteor-editable is a new project implementing something like x-editable, but nicely integrated with Meteor reactivity. Unfortunately inline editing is not supported yet (you have to use a popover the way it's set up now).

answered May 12 '14 at 21:41

foobarbecue

6,780
4
28
54

Meteor Handlebars templates: switching from text to input

3 Answers3