Tip: Script Tag Alternative

Because Go packages impose few limits on which code may be put into which file, you are not required to use a <script type="application/x-go"> tag and it works just as well to place this code in a separate file.

If you want to do this, the suggested naming convention is component-name-data.go.

For some-component.vugu you could place your corresponding Go code in some-component-data.go

For every component there are two structs which must be defined. One which implements ComponentType, and one which is the "data" for your component. If you do not define them in your Go code block the code generator will output empty structs and missing methods for you (as a convenience to make it easy to rapidly create simple components).

In writing Go code blocks in your components, it is important to observe the following naming conventions:

• component-name.vugu results in a code generated file called component-name.go in the same directory
• component-name.vugu implies a struct called ComponentName which corresponds to the type of the component, and a struct called ComponentNameData, which is the data for each instance of the component.

Let's take a look at a working example of a component that makes more use of the Go code section and see all of this work together. This example shows a button which, when clicked, will cause the browser to fetch data from the , parse the result, and display it.

• Since this example lives in root.vugu, the data struct is called RootData. (And for example in a component in file sample-comp.vugu, this would be SampleCompData.) This is where a component's instance data is stored.
• On RootData we have a variable called isLoading of type bool. This provides a simple way to vg-if a div, which then shows only during loading. (More below on how isLoading is updated.)
• We're looping over one of the members of bpi using vg-for in our markup to display each individual item returned.
• A handler for the DOM click event is enabled with @click. Notice that the method it calls is a member of data (of type ). This call does not have to be to a methd on data, but this is the most common case.
• The EventEnv is used to synchronize access to data, and works well from goroutines. When we modify any information on data or that could potentially have concurrency issues, you can use EventEnv.Lock() to get an exclusive lock, and EventEnv.UnlockRender() to release the lock and tell render loop that the page needs to be updated. See DOM Events for more info.