Can't get examples in "modelling application data" to work

I'd like to refresh my knowledge of Enyo with the possibilities of 2.4, so I started reading the "Modelling Application Data" tutorial. Though I can see the logic of the many thing explained over there, I can't make the example work, and I really would like a helping hand to get me started.

I have the bootplate version 2.4, and I would like to build the example explained in the "Models" section.
I have the code which should probably go into 'views.js':
    enyo.kind({
        name: "ContactView",
        published: {
            personModel: null
        },
        components: [
            {kind: "enyo.Image", name: "avatar"},
            {kind: "enyo.Control", name: "nameLabel"},
            {kind: "enyo.Control", name: "townLabel"}
        ],
        bindings: [
            {from: ".personModel.name", to: ".$.nameLabel.content"},
            {from: ".personModel.hometown", to: ".$.townLabel.content"},
            {from: ".personModel.avatar", to: ".$.avatar.src"}
        ]
    });
Then I suppose that the following code should go into bootplate's 'data.js':
    var myModel = new enyo.Model({
        name: "Kevin", 
        hometown: "San Francisco",
        avatar: "/assets/kevin.png",
        height: 6.0
    });
Now there is this part of the code, that is supposed to be the missing link, but I don't know where to put this:
this.$.contactView.set("personModel", myModel);
I know the documentation is being worked on, but it would be so much more helpful if a few more lines about how and where to implement the snippets of code. I mean, I've done some things in Enyo, but I still feel I don't even qualify for being 'newbie' if I can't get the first example to work...

Anyway, any help is really appreciated!!! Probably very simple, but it would save me hours of trying out all possibilities.

Comments

  • Hi @MrPleasant‌, here is a fairly basic example: http://jsfiddle.net/aarontam/dk9u41h9/.

    I've declared my "ContactView" kind and included that as a child control in another control, which I'll be using to house my entire app (I've named this "MyApp"). Within the "MyApp" control, on create, I'm creating a model with some defined attributes, and then setting that model onto my ContactView control's "personModel" property.

    In the specific example of using bootplate, you could place everything from the fiddle in view.js, except for the last line that initializes and renders the MyApp control, as that is handled for you by bootplate (see index.html or debug.html). You might use data.js to declare custom model declarations, which extend the core enyo.Model kind, in addition to custom collection declarations. Hope this helps!

  • Thank you very much! That surely helps. At least I now have some starting point.
    I noticed that you use this 'create:' block, while I was used to 'constructor:' blocks. Now I wanted to read up on this. Can you recommend a link (I already found this article: https://github.com/enyojs/enyo/wiki/Object-Lifecycle)
Sign In or Register to comment.