Building a CodeMirror component

1

I’m trying to build my first component and having a little problem. I’m using the codemirror.js library to incorporate a code editor into my site and I have the code editor displaying on the screen, but I can’t figure out how to get my data to show up in the control.

I want the data from content to display in the editor when it first loads and I’d like to have the data bind to that property.

Here is a jsbin if anyone can help: http://emberjs.jsbin.com/farobo/4/edit

2

Updated at http://emberjs.jsbin.com/meguko/16/edit

There’s a couple of things to notice,

tagName: "textarea",

this tells the component to render as a textarea so you don’t need the template.

self.$().get(0)

this is how you get a reference to the component’s element (instead of document.findByElementId).

Ember.run(function(){

this is necessary because the codemirror component doesn’t know anything about ember’s run loop. This will make sure that the change is integrated into ember’s lifecycle.

updateValue

this watches for changes to the component’s ‘value’ and updates the codemirror component.

3

Thanks for the description of the changes. That does help but it still doesn’t seem to populate the codemirror component with the data when the page jsfiddle loads. Anything else that I could be missing?

4

This is the approach I took in a project I’ve been working on.

https://github.com/mfeckie/try-ruby-railsgirls-edition/blob/master/app/assets/javascripts/components/code-area_component.js

It’s used like this

{{code-area initialCode=lesson_code endResult=endResult}}

There’s a few more examples of different versions in that repo as well as some unit tests.

Hope this helps.

5

Hi, I updated the fiddle to set the initial value. http://emberjs.jsbin.com/meguko/19/edit

I’m not sure why it wasn’t working before, the codemirror instance seems to ignore the value passed into it’s config when initialized…

1 Like