How would you go about binding simple json to a data repeater

edited May 2014 in Enyo 2.4

I am working with a company that has not completely implemented their API. They are handing me json that looks as follows:

That's it. No description no parent container. It's valid Json but I don't know how to go about binding it to a data repeater.

I was using the following code:

{ kind:"DataRepeater", name:"instanceRepeater", multipleSelection: true, components: [
{kind: "onyx.Item", classes: "instance-muted", components: [
{ tag: "div", classes: "instance-container", components: [
{ tag: "span", name: "id", classes: "instance-hidden" },
{ kind: "enyo.Image", name:"icon", alt: "VM Instance", classes: "instance-icon"},
{ tag: "span", name: "desc", classes: "instance-desc" },
{ tag: "span", name: "status", classes: "instance-status", allowHtml:true },
{ tag: "span", name: "ip", classes: "instance-ip" },
{ tag: "div", name: "arrow", classes: "arrow-left" }
], bindings: [
{ from: "", to: ".$.id.content" },
{ from: ".model.desc", to: ".$.desc.content" },
{ from: ".model.icon", to: ".$.icon.src", transform: function (v) { return "assets/" + v; } },
{ from: ".model.status", to: ".$.status.content",
transform: function (v) {
if(v == 1 )
return "Status: UP";
return "Status: DOWN";
{ from: ".model.ip", to: ".$.ip.content", transform: function (v) { return "IP: " + v; }},
{ from: ".model.status", to: ".selected",
transform: function (v) { if(v == 1) { return true; } else { return false; } } },
{ from: ".selected", to: ".$.arrow.showing"},
], ontap: "drawMap" }
but that was with a more fleshed out JSON file that i created. Any thoughts as to how to bind to much more simplified JSON?


  • Is there a way to transform JSON similar to XSLT?
  • You won't be able to bind an array of strings into DataRepeater.

    tl;dr I didn't think it would be possible but it seemed like an interesting challenge so here's an option. If you create a custom model, you can override parse() to adapt the string into a model instance.

    One curious assumption in Collection.add() is that if it's fed a string or number rather than an object, it assumes that that's the object's ID and so it creates an object literal with a key for the model's primaryKey and the provided value as the value. Concretely, calling:


    Will result in Collection creating the following object (assuming the model's primaryKey = "id") which will be passed to the constructor of the model

    {"id": "blah"}

    Given that knowledge, you can pass your array of strings to enyo.Collection.add knowing that your parse() method will receive an object which you can convert as you desire.
        name: "MyModel",
        kind: enyo.Model,
        noDefer: true,
        constructor: enyo.inherit(function(sup) {
            return function(attr, props, opts) {
                opts = enyo.mixin(opts, {parse: true});
                if(enyo.isString(attr)) {
          , {id: attr}, props, opts);
                } else {
                    sup.apply(this, arguments);
        parse: function(obj) {
            if(obj.hasOwnProperty("id")) {
                return {
            } else {
                return obj;
  • You are a freaking code gangsta!
Sign In or Register to comment.