Comments (11)
Yep, emptying the cache was what I needed. Now it is showing log messages. I still haven't gotten the js to work, but now I have errors to work with. Thanks!
from vugu.
Have a look at the DOM Events documentation page. That shows how to register to handle a DOM event (such click, or others).
To get the value
property of an element you'll need to use https://golang.org/pkg/syscall/js/ to call into the browser to get it (for now, more functionality surrounding this is coming).
from vugu.
Closing this, feel free to re-open if more questions or something isn't clear the docs.
from vugu.
I have a question about this. I'm having a hard time getting the value using syscall/js.
Here is the relevant portion of my component:
<div vg-if='data.isUpdating'>Loading...</div>
<div vg-if='data.isUpdating == false'>
<form @onSubmit='data.onSubmit(event)'>
<div>
<text-field vg-for='i := 0; i < 2; i++' :id="data.Fields[i].Name"
:name="data.Fields[i].Name" :contents="data.Fields[i].Contents">
</div>
<input type="submit" value="Submit">
</form>
</div>
And in my go code:
type RootData struct {
Fields []TextFieldData
isUpdating bool
}
func (data *RootData) onSubmit(event *vugu.DOMEvent){
ee := event.EventEnv()
go func() {
ee.Lock()
data.isUpdating = true
ee.UnlockRender()
ee.Lock()
defer ee.UnlockRender()
for i := 0; i < len(data.Fields); i++ {
js.Global().Get("document").Call("getElementById", data.Fields[i].Name).Call("setAttribute", "name", data.Fields[i].Contents)
}
data.isUpdating = false
}()
}
As a test, I'm trying to change the label (name) displayed next to the text box, but it isn't working. I'm at a loss here. Any advice @bradleypeabody ? I'm using this for the form validation tutorial.
from vugu.
A couple things I see at first glance:
- Your
onSubmit
function should beOnSubmit
. For various reasons it needs to be an exported method, at least for now. - The event name from
@whatever
needs to reflect the actual event name without "on", so for submit instead of@onsubmit=
, you want@submit
Try fixing those points and see how it goes.
from vugu.
Thanks for that. I hadn't noticed those things. However, it didn't change anything. Is there a way for me to tell if the function was even called? log.Printf doesn't work.
from vugu.
log.Printf should indeed work, also fmt.Printf. If there's no output I would suspect your function is still not being called. Are you sure that whatever you are doing it invoke it would cause the 'submit' event to be fired? You might try some other events like 'click', 'keydown', 'mouseover' in order to isolate if no events are being fired at all or if it's only specific ones that are having trouble. That might help narrow it down.
from vugu.
@ScreamingTaco This program works with a submit event:
<div class="my-first-vugu-comp">
<form @submit='data.OnSubmit(event)'> <input type="submit">Submit</input> </form>
<div vg-if="data.Show">It worked!</div>
</div>
<style>
.my-first-vugu-comp { background: #eee; }
</style>
<script type="application/x-go">
import "log"
type RootData struct { Show bool }
func (data *RootData) OnSubmit(event *vugu.DOMEvent) {
log.Printf("event: %v", event)
event.PreventDefault()
data.Show = true
}
</script>
from vugu.
Also don't get tripped up by browser cache. Just today I was running into "log statements not working" and it turned out to just be the browser had cached the earlier version. There is some stuff in place in Vugu to mitigate this, but still... don't be shy about "Empty Cache and Hard Reload" if any doubt.
from vugu.
@bradleypeabody
Any new progress or plan about DOM object access by vugu's method instead of syscall/js package ?
Thanks for hard working !
from vugu.
@itstmyi Getting there - making steady progress but it's quite a bit of work. I hope to have the basic new DOM syncing mechanism working for markup by the end of this weekend and then follow up with events and type-safe components right after.
from vugu.
Related Issues (20)
- Using javascript libaries with Vugu HOT 8
- wiring example not working HOT 1
- Consider using GCSS for CSS preprocessing HOT 1
- Panic: index out of range HOT 2
- This fixes the example in examples/fetch-and-display HOT 1
- MDL latest now is updated after many years neglect HOT 2
- Short form of vg-comp tag stops rendering the parent component
- Render server side and client side HOT 3
- webpack loader support and mixed with vue or react HOT 1
- Abandoned? HOT 9
- The Rendered lifecycle of the subcomponent has not been called HOT 1
- Getting Vugu to v1.0 and into production HOT 19
- TailwindCSS and Vugu HOT 2
- Produce a full production example
- State of vgforms package - do we need this for v1.0? HOT 1
- Request for a volunteer: TinyGo support for v1.0 (or shortly after) HOT 2
- Is the library alive? HOT 1
- Vugu v1.0 ToDo List
- Feedback Request: Do you use the generated `main_was.go`? HOT 3
- js Set can not set Function HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vugu.