View Data Binding With Built-in Atom Controls


#1

I’m basically starting an Atom package to turn Atom into a little IDE for game creation. The project format uses XML and I need to provide editors for resources like sprites, backgrounds, etc. This mostly just involves having checkboxes and stuff to toggle things like whether the texture should be resized to a power of two. I want to implement all of these editors as custom views that open in tabs, and I’ve already gone through the tutorial for that. I am using the common widgets used in Atom that are presented in the styleguide. I want to know how to data-bind these widgets.

For example, I have so far created a BackgroundEditor view that loads an HTML file which declares the widgets necessary for each property of a background resource.
new File(__dirname + “/background-editor.htm”, false).read(false).then (result) =>
@element.innerHTML = result

Now I want to know how to data bind the controls in this HTML file to other objects and properties. I am not really interested in using ReactJS because I wanted something that will be stable and not change with future updates. I chose the styleguide widgets because they are consistent with the rest of the Atom look and provide basically everything I need. How can I accomplish data binding the way I want?