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.