Trouble with enyo.Ajax and scoping

Having some issues getting the binding to work on a collection. In the debugger I can see that my ajax call is returning data correctly, but my DataList does not get populated. Immediately after the processCategories function ends the this.collection variable is null. Any thoughts?

enyo.kind({
name: "CategoryEditor",
kind: "FittableColumns",
fit: true,
classes: "enyo-fit",
published: {
collection: null
},
components:[

{kind: "FittableRows", components: [
{name: "repeater", kind:"enyo.DataList", fit:true, components: [
{components: [
{name:"categoryName"}
], bindings: [
{from: ".model.categoryName", to: ".$.categoryName.content"}
]}
]}
]}
],
bindings: [
{from: ".collection", to: ".$.repeater.collection"}
],
categories : '',
create: enyo.inherit(function (sup) {
return function () {
sup.apply(this, arguments);
this.getCategories();
};
}),
getCategories: function(inSender,inEvent) {
var request = new enyo.Ajax({
url: "http://localhost:8080/assets/categories.json?",
method: "GET",
handleAs: "json"
});
request.response(this,"processCategories");
request.go();
},
processCategories: function(inSender, inResponse){
if (!inResponse) {
return;
}
this.collection = new CategoryCollection(inResponse.categories.categories);
}
});

Comments

  • edited March 2014
    That's odd about this.collection being null, are you checking the value in the getCategories method? Otherwise, could you post the source of your CategoryCollection? Also, not sure if this was intentional, but there looks to be an extra level of components in your repeater. Try something like this:
    
    {name: "repeater", layoutKind: "FittableRowsLayout", kind:"enyo.DataList", fit:true, components: [
    	{bindings: [
    		{from: ".model.categoryName", to: ".content"}
    	]}
    ]}
    
  • I guess the crux of the issue is, if I don't call getCategories, and it never issues the callback to processCategories, if I simply just set the this.collection in the create method, everything works. For instance:

    data: [{categoryName:"Test"}],
    create: enyo.inherit(function (sup) {
    return function () {
    sup.apply(this, arguments);
    //this.getCategories();
    this.collection = new cmc.CategoryCollection(this.data);
    };
    }),
    This will render the list with 1 item 'Test', displaying correctly. The ajax call returns a correct response that I can see. Clearly I just cannot set this.collection in the processCategories function. That's what makes me think it has to be the wrong 'this' at that point.
  • I think the problem is in your processCategories call -- you can't just directly assign this.collection, as that won't be picked up by the system. Use this.set("collection", data) instead in order to trigger all the proper observers.
  • You are correct sir, thank you!
Sign In or Register to comment.