Question about wire.js

[Decio Battaglia]

Hi everyone,

I am trying to learn, in my limited free time, how to use wire.js and at the moment I feel quite stuck and confused.

 

To practice I am having a go at building this simple app for my son, that is 3 years old.

Now, I have a github page for this that is sought of working and that I have been developing using wire 0.9. I have tried upgrading to wire 0.10.2 (locally) and the page no longer works.

The problem starts in main.coffee at line 32:

        initNavigation: [$ref: "defaultLanguage"]

That is part of the component:

  navigationController:
    create: 
      module: 'app/navigation/navigation_controller'
      args:
        defaultLanguage: $ref: "defaultLanguage"
    ready: 
      setCurrentLanguage: []
      initNavigation: [$ref: "defaultLanguage"]
    before:
      setCurrentLanguage: 'audioController.resetAudio'
    after:
      setCurrentLanguage: 'audioController.setCurrentLanguage'

The function initNavigation lives in navigation_controller.coffee:

      initNavigation: (lang) ->
        self = @
        activeNode = document.getElementById("nav_#{lang}")
        activeNode.classList.remove('grey')
        new FastButton(activeNode.parentNode, (e) -> self.navigate e)

Here my touch events are initialized, but when initNavigation is called, document.getElementById("nav_#{lang}") resolves to null.

Now, I assume this is happening because the navigation and navigationController components are in no way connected. What I am looking for is something like: when the navigation is rendered call initNavigation in navigation_controller. But I feel lost in how to achieve this and suspect I should be using a completely different pattern...

Hope all this makes some sense, because I am totally new to this Inversion of Control approach and I feel I am struggling to grasp it...

Any hints in the right direction would be warmly welcomed. Thanks.

[Scott Andrews]

Hi Decio,

Thanks for the detailed question.

wire.js is really good at ordering the initialization of components within your application, the only thing you have to do is indicate in the wire spec where those interdependencies exist. In this case, the navigationController depends on a DOM node that wire.js isn't aware of.  Instead of doing the DOM lookup inside the init function, you can inject that node into the init function.

The wire DOM docs provide a good place to get started. Let us know if you have further questions.

https://github.com/cujojs/wire/blob/master/docs/dom.md

-Scott

--
You received this message because you are subscribed to the Google Groups "cujojs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cujojs+un...@googlegroups.com.
To post to this group, send email to cuj...@googlegroups.com.
Visit this group at http://groups.google.com/group/cujojs.
To view this discussion on the web visit https://groups.google.com/d/msgid/cujojs/c1f2e2e6-8389-4f92-bfe4-0836562306c1%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Decio Battaglia]

Thanks Scott for the fast reply!

I will give it a try.

Decio

2013/8/13 Scott Andrews <sco...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "cujojs" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cujojs/RbSl7QAwySU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cujojs+un...@googlegroups.com.

To post to this group, send email to cuj...@googlegroups.com.
Visit this group at http://groups.google.com/group/cujojs.

To view this discussion on the web visit https://groups.google.com/d/msgid/cujojs/CAGv6PiCW%3DdXYw1byDHvoh2eMSD-P94OvLJQZiVLpSq1ytkrBHA%40mail.gmail.com.

[Decio Battaglia]

Thanks again Scott, this now makes perfect sense and all works as it should!

Decio

2013/8/13 Decio Battaglia <decio.b...@gmail.com>

[unscriptable]

Curious how you inverted the problem, Decio.  Did you use property injection?

 navigationController:
    create: 
      module: 'app/navigation/navigation_controller'
      args:
        defaultLanguage: $ref: "defaultLanguage"

    properties: 

        activeNode: $ref: 'dom!nav_#{lang}'

    ready: 
      setCurrentLanguage: []
      initNavigation: [$ref: "defaultLanguage"]
    before:
      setCurrentLanguage: 'audioController.resetAudio'
    after:
      setCurrentLanguage: 'audioController.setCurrentLanguage

Then, inside navigation_controller:

this.activeNode.classList.remove('grey')

Just curious. :)

-- John

[Decio Battaglia]

Hi John and thanks for the tip!
I remember reading now about property injection in the docs, but then I forgot its existence.

I did this, passed the navigation component to the initNavigation method in the the navigationController component:

  navigation:
    render:
      template:
        module: "text!navigation/navigation_template.html"
    insert:
      at: "dom.first!header"

  navigationController:
    create:
      module: 'app/navigation/navigation_controller'
      args:
        defaultLanguage: $ref: "defaultLanguage"
    ready:
      setCurrentLanguage: []

      initNavigation: [{$ref: "defaultLanguage"}, {$ref: "navigation"}]

    before:
      setCurrentLanguage: 'audioController.resetAudio'
    after:
      setCurrentLanguage: 'audioController.setCurrentLanguage'

But I will try out your suggestion too.

Thanks again! :)

Decio

On Tuesday, August 13, 2013 11:17:16 PM UTC+1, unscriptable wrote:

Curious how you inverted the problem, Decio.  Did you use property injection?

 navigationController:
    create: 
      module: 'app/navigation/navigation_controller'
      args:
        defaultLanguage: $ref: "defaultLanguage"

    properties: 

        activeNode: $ref: 'dom!nav_#{lang}'

    ready: 
      setCurrentLanguage: []
      initNavigation: [$ref: "defaultLanguage"]
    before:
      setCurrentLanguage: 'audioController.resetAudio'
    after:
      setCurrentLanguage: 'audioController.setCurrentLanguage

Then, inside navigation_controller: