Meteor-Editable: X-Editable inspired inline editor for Meteor

[Dave Workman]

Hey guys,

I've just released the first version what I call Meteor-Editable. It's a copy-cat of X-Editable but you use Blaze component syntax to initialize it and everything else just works. It doesn't do everything x-editable does, but I hope to get there eventually, for now if there's something missing that you really need, let me know and I'll try to work it in. Here's the demo/documentation site:

http://meteor-editable.meteor.com/docs

[salicon....@gmail.com]

Hey there!

I don't see any explanations in the docs on how to populate a select, for example.

[Dave Workman]

You are right, I'll add that next update.

One of the options is source, it expects an array of objects formed like so: [{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]

[Dmitriy Shatalov]

Hello.

Can you add inline editable mode?

[Dave Workman]

Already working on it! :)

[Brent Abrahams]

This is cool, Dave.  Keep up the good work.  I've always felt like Meteor was missing a good native in-line editing package.

[neurofuzzy]

This looks very useful. I am currently using x-editable, but it lacks reactivity and is a little harder to integrate with Blaze. I'll be keeping an eye on this!

[Josh Bechard]

Dave, can you update the example code area with the whole line of code for a select type editable field? I still get a blank box when I use {{> m_editable type="select" source='{{values}}' }} . The helper looks like this Template.donateWith.helpers({

    values: function () {

      var currentValues = [{value: 1, text: "text1"}, {value: 2, text: "text2"}];

      return currentValues;

    }

  });

[Dave Workman]

Just change source='{{values}}' to source=values

--
You received this message because you are subscribed to a topic in the Google Groups "meteor-talk" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/meteor-talk/N_bBpOyeKEI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to meteor-talk...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Joshua Bechard]

Awesome. Thanks. How do you set one of the values as 'selected'? Or really, how do you add any of the options values to these fields? 

--

Joshua Bechard

Technology Director

1555 NW Gage Blvd.

Topeka, KS 66618

863-738-6901 (mobile)

785-246-6845 (office)

[Dave Workman]

it automatically selects based on where the value in the options list equals the value that's attached to the data object. For instance if you passed this as a config to m_editable:

Session.setDefault('value', 2);

Template.templ.editableConfig = function () {

  return {

    values: [{value: 1, text: "text1"}, {value: 2, text: "text2"}],

    value: Session.get('value')

  };

}

this will render with "text2" as the selected text. If you do a Session.set('value', 1); then it will automatically change the selected value to 1 and display "text1".

[Joshua Bechard]

Ok. I don't understand what is happening here. 

Should I keep my existing template helper? Should this code replace that helper? Should it read like this Template.myTemplateName.editableConfig? If this is the case then do I need to add something to the html portion to let the system know that I need to pass options to m_editable? 

[Dave Workman]

If you look at the bottom of this page under the heading examples: http://meteor-editable.meteor.com/docs you'll see there's really two ways of passing options to Blaze templates. You can make a helper that returns an object, or you can build the option:value pairs directly in the template caller. For example this:

<template name="tmpl1">

   {{> my_templ foo='op1' bar='op2' }}

</template>

is equivalent to:

<template name="tmpl1">

   {{> my_templ options }}

</template>

Template.tmpl1.helpers({

  'options': function () {

    return {

      foo: 'opt1',

      bar: 'op2'

    };

  }

});

So it's really up to you. Depending on what your data context is it might change which option you decide to use. For instance, if you have the value you want to use in the data context it might make sense to just pass it in {{> m_editable value=myVal }}, but if you need to grab it from a session variable, it might make more sense to pass it in through a helper: return { value: Session.get('value') };

Hope that helps,

-Dave

[Joshua Bechard]

Ok, I see, thanks, that answered my question. 

On a separate topic, I have three calls to m_editable and when I click any of the three the box pops up over the first one instead of the one that is clicked. 

In the screenshot I clicked on the word "Check"

 

[Dave Workman]

Thanks for bringing this to my attention. I've released a fix, please tell me if it help. (Run a 'mrt update' to get the new release)

[Joshua Bechard]

Thanks, yes that did fix it. 

[James Bower]

Do you have a way to allow/disallow edits for everything on a page?

Jim

[Dave Workman]

Yes, sorry the documentation is a little of out date. If you pass in a true value for the option "disabled" it will not go into edit mode, and by default the text will be in a span instead of an a tag. You could use a session variable for each editable to have it set for everything on a page. Example: https://gist.github.com/davidworkman9/dd473d9976899b67f1a1

[James Bower]

Thanks for the quick reply.

Jim

--

You received this message because you are subscribed to a topic in the Google Groups "meteor-talk" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/meteor-talk/N_bBpOyeKEI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to meteor-talk...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Jim Bower
Looking for spurs

LinkedIn