Data binding to a datalist with each row nested in a div

Hey, up on my grind tonight. I have this datalist that works to a point. If I throw in another div tag to wrap my bound components the bindings fail. I am wondering if this is how it's supposed to be or if I should be binding to a custom kind? If this is supposed to be how it works as a best practice can you help me figure out the binding to: syntax? If I take that extra div out it works but then I can't style all the spans in 1 fell swoop. Here is the code.

enyo.kind({
name: "ListUsers",
kind: "FittableRows",
//fit: true,
classes: "enyo-fit",
published: {
collection: null
},
components:[
{ kind: 'Header', title: 'jetstream - users' },
{ kind: "FittableRows", fit:true, components: [
{ name: "repeater", kind: "enyo.DataList", fit:true, pageSizeMultiplier: 100, components: [
{ components: [
{ tag: "div", name: "userRow", components: [
{ tag: "span", name: "firstName" },
{ tag: "span", content: " " },
{ tag: "span", name: "lastName" },
{ name: "phone" },
{ name: "email" }
],
], bindings: [
{ from: ".model.firstName", to: ".$.firstName.content" },
{ from: ".model.lastName", to: ".$.lastName.content" },
{ from: ".model.phone", to: ".$.phone.content" },
{ from: ".model.email", to: ".$.email.content" }
]}
]}
]},
{ kind: "Footer", classes: 'center' },
],
bindings: [
{from: ".collection", to: ".$.repeater.collection"}
],
create: enyo.inherit(function (sup) {
return function () {
sup.apply(this, arguments);
this.getUsers();
};
}),
getUsers: function(inSender,inEvent) {
var request = new enyo.Ajax({
url: "http://atxapps.com/_sites/atxapps.com/dev/jetstream/assets/dataUsers.json",
method: "GET",
handleAs: "json"
});
request.response(this,"processUsers");
request.go();
},
processUsers: function(inSender, inResponse){
if (!inResponse) {
return;
}
var c = new enyo.Collection(inResponse.users);
this.set("collection", c);
}
});

Comments

  • I think you might have to do to: ".$.userRow.$.firstName.content".
  • I tried that and I get the error message:

    SyntaxError: invalid property id
  • I ended up just removing the parent div tag and styling the components directly. I got the look I was going for through css. I think I read somewhere where css styles are preferred to more complex options because of overhead when using a data control. I don't know I am just having fun hacking the heck out this thing! :)
  • This fiddle has some magic to it. http://jsfiddle.net/4tV4U/ It has what I was trying to do with a parent wrapper to the child components but I can't seem to implement it correctly. Must the component wrapping the components be declared in the bindings? I am going to add "classes" to my data and see if that works.
  • Yeah, I gotchu, it's a hierarchy but I can't figure out the magic syntax to wade through the glob and get to the good stuff. Break off a line of code or two if you can, please?
  • That did the trick. I had my bindings blocks misplaced. Rookie mistake. LOL, thanks for your time and help!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!