EnyoJS: Call enyo functions from raw JavaScript

Question

In "old" enyo for HPalm devices I was able to call my enyo kind functions from/via JS like this:

<span class="button" onclick="app.doSomething();"></span>

Now in enyoJS it doesn't work. My app.js looks like this:

enyo.kind({
    name: "myapp.Application",
    kind: "enyo.Application",
    view: "myapp.MainView"
});

enyo.ready(function () {
    new myapp.Application({name: "app"});
});

I tried pretty much everything I could think of, but nothing seams to do the trick anymore.

var app = new myapp.MainView();
app.renderInto(document.body);
app.doSomething();

^ etc does not work either.

My MainView:

enyo.kind({
    name: "myapp.MainView",
    kind: "FittableRows",
    classes: "enyo-fit enyo-unselectable",
    fit: true,
    components:[
        //... stuff here ...
    ],

    doSomething: function(){
        console.log("Hello!");      
    }   
});

Is there a way how to achieve what I need? TYVM

score 3 · Accepted Answer · answered Jun 30 '14 at 13:28

You're on the right track. In fact, your attempt to create MainView directly works.

The reason app.doSomething() doesn't work is:

app doesn't exist in the global space and
app doesn't have a doSomething method; MainView does

There are a couple ways to get a reference to your Application instance. The easiest is to assign it to a global on create:

var app;
enyo.ready(function() {
    app = new myapp.Application({name: "app"});
});

// later
app.doSomething();

Another option is to grab it from the enyo.applications hash which stores a reference to each created application by its name.

enyo.applications.app.doSomething();

Here's a complete example

enyo.kind({
    name: "myapp.Application",
    kind: "enyo.Application",
    view: "myapp.MainView",
    doSomething: function() {
      this.$.mainView.doSomething();
    }
});

enyo.kind({
    name: "myapp.MainView",
    kind: "FittableRows",
    classes: "enyo-fit enyo-unselectable",
    fit: true,
    components:[
        //... stuff here ...
    ],

    doSomething: function(){
        console.log("Hello!");      
    }   
});

enyo.ready(function () {
    var app = new myapp.Application({name: "app"});

    // works, but not recommended as it breaks encapsulation
    // app.$.mainView.doSomething();

    // preferred but requires a little extra code
    app.doSomething();
});

Thanks. I tried that global approach, but it didn't work - that's why I'm confused. Same for: "enyo.applications.app.doSomething();". Your 3rd example works fine - THANK YOU. :) — user3789335, Jul 01 '14 at 02:55

EnyoJS: Call enyo functions from raw JavaScript

1 Answers1