[ALOY-1254] Alloy: Support model transform() method for collection-view binding

GitHub Issue	n/a
Type	Improvement
Priority	None
Status	Resolved
Resolution	Fixed
Resolution Date	2016-03-21T17:21:11.000+0000
Affected Version/s	Alloy 1.5.1, Alloy 1.6.0, Alloy 1.7.0
Fix Version/s	Release 5.2.1, alloy 1.8.1
Components	XML
Labels	data-binding
Reporter	Fokke Zandbergen
Assignee	Fokke Zandbergen
Created	2015-02-20T15:25:03.000+0000
Updated	2016-03-30T09:07:04.000+0000

Description

While undocumented, with model-view binding the model is tried for a transform() method. With collection-view binding you have to use the dataTransform attribute in the view. If the user doesn't use the dataTransform attribute we should try the model for a transform() method as well.

Current situation

*index.xml*

<Alloy>
  <Model src="foo" />
  <Collection src="foo" /> 
  <Window class="container">
    <Label text="{foo.name}" />
    <TableView dataCollection="foo">
      <TableViewRow title="{name}" />
    </TableView>
  </Window>
</Alloy>

*index.js* (compiled)

    function __alloyId10(e) {
        // ..
            __alloyId6.__transform = {};
            var __alloyId8 = Ti.UI.createTableViewRow({
                title: "undefined" != typeof __alloyId6.__transform["name"] ? __alloyId6.__transform["name"] : __alloyId6.get("name")
            });
        // ..
    }
    // ..
    var __alloyId11 = function() {
        $.__alloyId4.text = _.isFunction(Alloy.Models.foo.transform) ? Alloy.Models.foo.transform()["name"] : _.template("<%=foo.name%>", {
            foo: Alloy.Models.foo.toJSON()
        });
    };

Suggested change

The model's transform() method could be supported by changing the 3rd line off the compiled example to:

__alloyId6.__transform = _.isFunction(__alloyId6.transform) ? __alloyId6.transform() : {};

Comments

Fokke Zandbergen 2015-02-20

I've updated the documentation with the missing transform() function: https://wiki.appcelerator.org/display/guides2/Alloy+Data+Binding
Fokke Zandbergen 2016-03-16

PR: https://github.com/appcelerator/alloy/pull/768

Hazem Khaled 2016-03-27

I’m facing issue since Alloy 1.8.1 maybe related to here ALOY-1254, i've to add transform method extended in the model, and not working without it

   <Alloy>
   	<Model src="store_selected”/>
   	<Window>
   		<Label text="{store_selected.logo}"/>
   	</Window>
   </Alloy>

   Alloy.Globals.Models.store_selected.fecth();
   index.open();

   exports.definition = {
   	config: {
   		columns: {
   			"store_id": "INTEGER",
   			"name": "TEXT",
   			"displayname": "TEXT",
   			"logo": "TEXT",
   			"lang": "TEXT",
   			"website_id": "INTEGER",
   			"sort_order": "INTEGER",
   			"group_id": "INTEGER",
   			"root_category_id": "INTEGER"
   		},
   		adapter: {
   			type: "sql",
   			collection_name: "store_selected",
   			idAttribute: "store_id"
   		}
   	},
   	extendModel: function(Model) {
   		_.extend(Model.prototype, {
   			transform: function transform() {
   				return this.toJSON();
   			}
   		});
   		return Model;
   	},
   	extendCollection: function(Collection) {
   		_.extend(Collection.prototype, {});
   		return Collection;
   	}
   };

Fokke Zandbergen 2016-03-28

[~hazemkhaled] thanks for reporting, I've logged this under ALOY-1474 and a fix is in ready soon.

JSON Source