Titanium JIRA Archive
Alloy (ALOY)

[ALOY-1623] Data Binding: Deep Link Binding Broken

GitHub Issuen/a
TypeBug
Priorityn/a
StatusOpen
ResolutionUnresolved
Affected Version/sn/a
Fix Version/sn/a
ComponentsModels
Labelsregression
ReporterZachary Litten
AssigneeFeon Sua Xin Miao
Created2018-06-07T16:02:53.000+0000
Updated2018-06-20T13:38:08.000+0000

Description

When building an Alloy project which uses deep link data binding the build will fail during the Alloy compilation step. Console Output: {noformat} [INFO] : ----- MVC GENERATION ----- [INFO] : [global style] loading from cache... [INFO] : [models/book.js] model processing... [INFO] : [index.xml] view processing... [INFO] : style: "index.tss" [INFO] : view: "index.xml" [INFO] : controller: "index.js" [INFO] : created: "Resources/android/alloy/controllers/index.js" [INFO] : created: "Resources/android/alloy/styles/index.js" [INFO] : [test.xml] view processing... [INFO] : style: "test.tss" [INFO] : view: "test.xml" [INFO] : controller: "test.js" [DEBUG] : Backbone = Alloy.Backbone, [DEBUG] : _ = Alloy._; [DEBUG] : function __processArg(obj, key) { [DEBUG] : var arg = null; [DEBUG] : if (obj) { [DEBUG] : arg = obj[key] || null; [DEBUG] : } [DEBUG] : return arg; [DEBUG] : } [DEBUG] : function Controller() { [DEBUG] : [DEBUG] : require('/alloy/controllers/' + 'BaseController').apply(this, Array.prototype.slice.call(arguments)); [DEBUG] : this.__controllerPath = 'test'; [DEBUG] : this.args = arguments[0] || {}; [DEBUG] : if (arguments[0]) { [DEBUG] : var __parentSymbol = __processArg(arguments[0], '__parentSymbol'); [DEBUG] : var $model = __processArg(arguments[0], '$model'); [DEBUG] : var __itemTemplate = __processArg(arguments[0], '__itemTemplate'); [DEBUG] : } [DEBUG] : var $ = this; [DEBUG] : var exports = {}; [DEBUG] : var __defers = {}; [DEBUG] : // Generated code that must be executed before all UI and/or [DEBUG] : // controller code. One example is all model and collection [DEBUG] : // declarations from markup. [DEBUG] : $.Books = Alloy.createCollection('book');$.Book = Alloy.createModel('book'); [DEBUG] : // Generated UI code [DEBUG] : $.__views.test = Ti.UI.createWindow( [DEBUG] : {id:"test",} [DEBUG] : ); [DEBUG] : $.__views.test && $.addTopLevelView($.__views.test); [DEBUG] : var __alloyId1={};var __alloyId4=[];var __alloyId6={type:'Ti.UI.Label',bindId:'bookLbl',properties:{bindId:"bookLbl",},};__alloyId4.push(__alloyId6);var __alloyId3 = {properties:{name:"book",},childTemplates:__alloyId4,};__alloyId1["book"]=__alloyId3;$.__views.__alloyId10 = Ti.UI.createLabel( [DEBUG] : {text:'Collection Binding',id:"__alloyId10",} [DEBUG] : ); [DEBUG] : $.__views.__alloyId7 = Ti.UI.createListSection( [DEBUG] : {headerView:$.__views.__alloyId10,id:"__alloyId7",} [DEBUG] : ); [DEBUG] : var __alloyId14=Alloy.Collections['$.Books'] || $.Books;function __alloyId15(e) { if (e && e.fromAdapter) { return; } var opts = __alloyId15.opts || {}; var models = __alloyId14.models; var len = models.length;var __alloyId8=[]; for (var i = 0; i < len; i++) { var __alloyId11 = models[i]; __alloyId11.__transform = _.isFunction(__alloyId11.transform)?__alloyId11.transform():__alloyId11.toJSON();var __alloyId13 = {bookLbl:{text:__alloyId11.__transform.title + ' by ' + __alloyId11.__transform.author,},template:"book",};__alloyId8.push(__alloyId13); }opts.animation ? $.__views.__alloyId7.setItems(__alloyId8, opts.animation) : $.__views.__alloyId7.setItems(__alloyId8);};__alloyId14.on('fetch destroy change add remove reset',__alloyId15);var __alloyId16=[];__alloyId16.push($.__views.__alloyId7);$.__views.__alloyId20 = Ti.UI.createLabel( [DEBUG] : {text:'Model Binding',id:"__alloyId20",} [DEBUG] : ); [DEBUG] : var __alloyId21=[];$.__views.__alloyId22 = {template:"book",properties:{id:"__alloyId22",},};__alloyId21.push($.__views.__alloyId22);$.__views.__alloyId17 = Ti.UI.createListSection( [DEBUG] : {headerView:$.__views.__alloyId20,id:"__alloyId17",} [DEBUG] : ); [DEBUG] : $.__views.__alloyId17.items=__alloyId21;__alloyId16.push($.__views.__alloyId17);$.__views.__alloyId0 = Ti.UI.createListView( [DEBUG] : {sections:__alloyId16,templates:__alloyId1,id:"__alloyId0",} [DEBUG] : ); [DEBUG] : $.__views.test.add($.__views.__alloyId0); [DEBUG] : var __alloyId23 = function() {$['Book'].__transform = _.isFunction($['Book'].transform) ? $['Book'].transform() : $['Book'].toJSON();$.__alloyId22.bookLbl:text = $['Book']['__transform']['title'];};$['Book'].on('fetch change destroy',__alloyId23);exports.destroy = function () {__alloyId14 && __alloyId14.off('fetch destroy change add remove reset',__alloyId15);$['Book'] && $['Book'].off('fetch change destroy',__alloyId23);}; [DEBUG] : // make all IDed elements in $.__views available right on the $ in a [DEBUG] : // controller's internal code. Externally the IDed elements will [DEBUG] : // be accessed with getView(). [DEBUG] : _.extend($, $.__views); [DEBUG] : // Controller code directly from the developer's controller file [DEBUG] : // Arguments passed into this controller can be accessed via the $.args object directly or: [DEBUG] : var args = $.args; [DEBUG] : // Generated code that must be executed after all UI and [DEBUG] : // controller code. One example deferred event handlers whose [DEBUG] : // functions are not defined until after the controller code [DEBUG] : // is executed. [DEBUG] : [DEBUG] : // Extend the $ instance with all functions and properties [DEBUG] : // defined on the exports object. [DEBUG] : _.extend($, exports); [DEBUG] : } [DEBUG] : module.exports = Controller; [DEBUG] : /Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/Alloy/commands/compile/sourceMapper.js:97 [DEBUG] : throw e; [DEBUG] : ^ [DEBUG] : SyntaxError: Unexpected token, expected ; (57:154) [DEBUG] : at Parser.pp$5.raise (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:4454:13) [DEBUG] : at Parser.pp.unexpected (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:1761:8) [DEBUG] : at Parser.pp.semicolon (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:1742:38) [DEBUG] : at Parser.pp$1.parseExpressionStatement (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2236:8) [DEBUG] : at Parser.pp$1.parseStatement (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:1911:17) [DEBUG] : at Parser.pp$1.parseBlockBody (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2268:21) [DEBUG] : at Parser.pp$1.parseBlock (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2247:8) [DEBUG] : at Parser.pp$3.parseFunctionBody (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:4235:22) [DEBUG] : at Parser.pp$1.parseFunction (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2386:8) [DEBUG] : at Parser.pp$3.parseFunctionExpression (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:3760:17) [DEBUG] : at Parser.pp$3.parseExprAtom (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:3722:19) [DEBUG] : at Parser.pp$3.parseExprSubscripts (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:3494:19) [DEBUG] : at Parser.pp$3.parseMaybeUnary (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:3474:19) [DEBUG] : at Parser.pp$3.parseExprOps (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:3404:19) [DEBUG] : at Parser.pp$3.parseMaybeConditional (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:3381:19) [DEBUG] : at Parser.pp$3.parseMaybeAssign (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:3344:19) [DEBUG] : at Parser.pp$1.parseVar (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2340:24) [DEBUG] : at Parser.pp$1.parseVarStatement (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2169:8) [DEBUG] : at Parser.pp$1.parseStatement (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:1861:19) [DEBUG] : at Parser.pp$1.parseBlockBody (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2268:21) [DEBUG] : at Parser.pp$1.parseBlock (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2247:8) [DEBUG] : at Parser.pp$3.parseFunctionBody (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:4235:22) [DEBUG] : at Parser.pp$1.parseFunction (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2386:8) [DEBUG] : at Parser.pp$1.parseFunctionStatement (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2053:15) [DEBUG] : at Parser.pp$1.parseStatement (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:1839:19) [DEBUG] : at Parser.pp$1.parseBlockBody (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:2268:21) [DEBUG] : at Parser.pp$1.parseTopLevel (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:1778:8) [DEBUG] : at Parser.parse (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:1673:17) [DEBUG] : at Object.parse (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/babylon/lib/index.js:7305:37) [DEBUG] : at Object.exports.generateCodeAndSourceMap (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/Alloy/commands/compile/sourceMapper.js:91:17) [DEBUG] : at parseAlloyComponent (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/Alloy/commands/compile/index.js:943:15) [DEBUG] : at /Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/Alloy/commands/compile/index.js:450:6 [DEBUG] : at arrayEach (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/lodash/lodash.js:516:11) [DEBUG] : at Function.forEach (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/lodash/lodash.js:9342:14) [DEBUG] : at /Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/Alloy/commands/compile/index.js:439:6 [DEBUG] : at arrayEach (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/lodash/lodash.js:516:11) [DEBUG] : at Function.forEach (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/node_modules/lodash/lodash.js:9342:14) [DEBUG] : at module.exports (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/Alloy/commands/compile/index.js:435:4) [DEBUG] : at Object. (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/Alloy/alloy.js:112:46) [DEBUG] : at Module._compile (module.js:635:30) [DEBUG] : at Object.Module._extensions..js (module.js:646:10) [DEBUG] : at Module.load (module.js:554:32) [DEBUG] : at tryModuleLoad (module.js:497:12) [DEBUG] : at Function.Module._load (module.js:489:3) [DEBUG] : at Module.require (module.js:579:17) [DEBUG] : at require (internal/module.js:11:18) [DEBUG] : at Object. (/Users/macdev/.appcelerator/install/7.0.3/package/node_modules/alloy/bin/alloy:3:1) [DEBUG] : at Module._compile (module.js:635:30) [DEBUG] : at Object.Module._extensions..js (module.js:646:10) [DEBUG] : at Module.load (module.js:554:32) [DEBUG] : at tryModuleLoad (module.js:497:12) [DEBUG] : at Function.Module._load (module.js:489:3) [DEBUG] : at Function.Module.runMain (module.js:676:10) [DEBUG] : at startup (bootstrap_node.js:187:16) [DEBUG] : at bootstrap_node.js:608:3 [ERROR] : Alloy compiler failed [ERROR] Application Installer abnormal process termination. Process exit value was 1 {noformat} test.xml:
<Alloy>
	<Collection id="Books" instance="true" src="book"></Collection>
	<Model id="Book" instance="true" src="book"></Model>
	<Window class="container">
		<ListView>
			<Templates>
				<ItemTemplate name="book">
					<Label bindId="bookLbl"></Label>
				</ItemTemplate>
			</Templates>
			<ListSection dataCollection="$.Books">
				<HeaderView>
					<Label>Collection Binding</Label>
				</HeaderView>
				<ListItem bookLbl:text="{title} by {author}" template="book"></ListItem>
			</ListSection>
			<ListSection>
				<HeaderView>
					<Label>Model Binding</Label>
				</HeaderView>
				<ListItem bookLbl:text="{$.Book.title} by {$.Book.author}" template="book"></ListItem>
			</ListSection>
		</ListView>
	</Window>
</Alloy>
book.js:
exports.definition = {
	config: {
		columns: {
		    "title": "string",
		    "author": "string"
		},
		adapter: {
			type: "sql",
			collection_name: "book"
		}
	},
	extendModel: function(Model) {
		_.extend(Model.prototype, {
			// extended functions and properties go here
		});

		return Model;
	},
	extendCollection: function(Collection) {
		_.extend(Collection.prototype, {
			// extended functions and properties go here

			// For Backbone v1.1.2, uncomment the following to override the
			// fetch method to account for a breaking change in Backbone.
			/*
			fetch: function(options) {
				options = options ? _.clone(options) : {};
				options.reset = true;
				return Backbone.Collection.prototype.fetch.call(this, options);
			}
			*/
		});

		return Collection;
	}
};

Comments

  1. Hans Knöchel 2018-06-08

    The error suggests an issue within your code:
       SyntaxError: Unexpected token, expected ; (57:154)
       
    It looks like inside the generated code, so you should check the generated Alloy code in Resources/ and find the related part of your source code from there.
  2. Zachary Litten 2018-06-08

    That error during the compilation is preventing me from looking at that the file since it's derived but it shows it in the console output. From testing I've found that the deep object binding works with the Collection. The compiler error occurs whenever I try to reference the Model in the binding like "{book.title}" or "{$.Book.title}" like I see in the Alloy Data Binding docs. When I try just the normal, shallow data binding with the Model it will compile and start the test app correctly, but I get an undefined error when opening the Window that the ListView is inside. {noformat} [ERROR] : TiExceptionHandler: (main) [80508,80508] ----- Titanium Javascript Runtime Error ----- [ERROR] : TiExceptionHandler: (main) [0,80508] - In /alloy/controllers/test.js:50,73 [ERROR] : TiExceptionHandler: (main) [1,80509] - Message: Uncaught TypeError: Cannot read property '__transform' of undefined [ERROR] : TiExceptionHandler: (main) [0,80509] - Source: var __alloyId21 = [];$.__views.__alloyId22 = { bookLbl: { text: $model.__transform.title + ' by ' + $model.__transform.author }, template: "book", properties: { id: "__alloyId22" } };__alloyId21.push($.__views.__alloyId22);$.__views.__alloyId17 = Ti.UI.createListSection( {noformat} Looking further into the generated Alloy file, the declaration of the model looks a little weird, but I'm not really familiar with the Alloy generated files anyways. The model declaration may not even be getting ran.
       if (arguments[0]) {
       		var __parentSymbol = __processArg(arguments[0], '__parentSymbol');
       		var $model = __processArg(arguments[0], '$model');
       		var __itemTemplate = __processArg(arguments[0], '__itemTemplate');
       	}
       

JSON Source