Integrating with js Libraries

[hexops]

Integrating with js Libraries

[slimsag]

Hi @newlix -- I unfortunately don't have time to dig into the specifics of that library right now, but I assume you're referencing this example:

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

i.e., you're wondering what you would pass in as div#myId in the case of an element rendered by Vecty. Given that is the case, the way you would do that would be to assign an Id to your element in Vecty. e.g.:

func (m *MyComponent) Render() *vecty.HTML {
	return elem.Div(
                prop.ID("myId"),
	)
}

Unfortunately, there isn't yet a way for you to be informed via Vecty that "your element has been created" for you to actually instantiate Dropzone in the example code above. This is due to issue #75

A workaround until that issue is fixed would be something like e.g. querying the DOM constantly until that element appeared, then instantiating Dropzone.

[newlix]

Hi, thanks for your suggestion.

I did solve the problem. I was wondering why I couldn't get the dom element after vecty.RenderBody was called. After reading the RenderBody source code, I found that body would only be rendered after the doc is ready.

// RenderBody renders the given component as the document body. The given
// Component's Render method must return a "body" element.
func RenderBody(body Component) {
	nextRender := doRender(body)
	if nextRender.tag != "body" {
		panic(fmt.Sprintf("vecty: RenderBody expected Component.Render to return a body tag, found %q", nextRender.tag))
	}
	doRestore(nil, body, nil, nextRender)
	// TODO: doRestore skip == true here probably implies a user code bug
	doc := js.Global.Get("document")
	if doc.Get("readyState").String() == "loading" {
		doc.Call("addEventListener", "DOMContentLoaded", func() { // avoid duplicate body
			doc.Set("body", nextRender.Node)
		})
		return
	}
	doc.Set("body", nextRender.Node)
} 

I found a easier way to make sure that the client.js generated by gopherjs will not run until after the page has loaded by using the HTML <script> defer Attribute (http://www.w3schools.com/TAgs/att_script_defer.asp).

//index.html
...
<script src="client.js" defer></script>

I think it would be useful that the default page automatically generated by gopherjs serve could generate the script tag with the derfer attribute too.

[slimsag]

Given that #75 has been fixed, you can now make your component implement the vecty.Mounter interface. That is:

func (m *MyComponent) Render() *vecty.HTML {
	return elem.Div(
                prop.ID("myId"),
	)
}

// Mount implements the vecty.Mounter interface.
func (m *MyComponent) Mount() {
        // DOM element "myId" has now been created and you can start manipulating it with DOM API.
}

Likewise, also see the vecty.Unmounter interface.

If there is a more specific question, or if you have any thoughts, feel free to let me know or create a new issue :)