Tying other Active.Templates.List implementations to an Active.System.Model

This past weekend, Frances left me electricity, but no cable (internet). So to pass the time, I thought I would attempt to figure out the low level magic of ActiveWidgets. I was less than successful...

Initially, I would like a very simple example of tying an Active.System.Control to an Active.System.Model, and from there to a control containing an Active.Template.List

1.
I was trying to create a simple example that build a list of <div>s using the enumerated values 1 through X.

2.
Then when that was working, I wanted to specify a different model and have the divs show the values of an XPath using a Model that understands
XML.

Any help you all could is greatly appreciated.
Thanks,

Here are few things to consider:

- the current list template requires two models, one for actual content (Data model) and one to define a sequence of indexes (Items model).

- models are defined on the control (parent of the template)

- list template uses item template to print each item :-)

- list template redirects getItemProperty call of the item template to getDataProperty call with the proper index.

Thanks Alex, That should help alot.

OK, I have this simple example with no Data model working

Here is the Code

if(!window.My) window.My = [];
if(!My.First) My.First = [];

My.First.Control = Active.System.Control.subclass();

/**
 *
 */
My.First.Control.create = function(){

    var obj = this.prototype;
    var _super = this.superclass.prototype;

    obj.init = function() {
         _super.init.call(this);
    }

    obj.defineModel("data");
    obj.defineModel("items");
    obj.defineModel("selection");

    obj.defineTemplate("data", new Active.Templates.List);
    obj.setTemplate("data/item",  new Active.System.Template );


    obj.defineDataProperty("value", function( i ){
        return i;
    });

    obj.defineItemsProperty("value", function( i ){
        return i;
    });
    
    obj.defineItemsProperty("values", [0,1,2,3]);
    obj.defineSelectionProperty("values", []);

    obj.getDataTemplate = function() {
        var t = this.defaultDataTemplate();
        var di = t.getTemplate("item");
        di.setContent("html", function(){ return this.getItemProperty("value");});
        t.setDataModel( this.getDataModel() );
        t.setItemsModel( this.getItemsModel() );
        t.setSelectionModel( this.getSelectionModel() );
        return t;
    }

    obj.setContent("html",function(){ return this.getDataTemplate(); });


};

My.First.Control.create();


var mfc = new My.First.Control();

document.write(mfc);

I hope others find this useful

obj.defineItemsProperty("value", function( i ){return i; });

is not neccesary

obj.defineItemsProperty("values", [0,1,2,3]);

In the grid implementation, the Active.Templates.List calls
getItemsProperty("values");
Which tells the list template which elements to generate.

How does the grid/table implementation set this?

If you set 'value' property (static value or function) it is used for all values of the property array. Otherwise you should assign the complete array to 'values' (plural!) property.

So then would

obj.setItemsProperty("value", function(){
   return this.getDataProperty("count");
});

tell the list that their are count number of items


This is I have done currently which may not be very elegant, but works

obj.defineItemsProperty("values", function() {
        var values = [], i, n = this.getDataProperty("count");
        for(i=0;i<n;i++){ values.push( i ) }
        return values;
    } );