Add traits to components

src/config/require-config.js

@@ -37,6 +37,7 @@ require.config({
 								{  name: 'Editor', 					location: 'editor', 					},
 		            {  name: 'AssetManager', 		location: 'asset_manager', 		},
 		            {  name: 'BlockManager', 		location: 'block_manager', 		},
+								{  name: 'TraitManager', 		location: 'trait_manager', 		},
 		            {  name: 'StyleManager', 		location: 'style_manager', 		},
 		            {  name: 'DeviceManager', 	location: 'device_manager', 	},
 		            {  name: 'StorageManager', 	location: 'storage_manager', 	},
@@ -54,4 +55,4 @@ require.config({
 		            {  name: 'Parser',					location: 'parser',						},
 		            {  name: 'Utils', 					location: 'utils', 						}
 	]
-});
+});

src/demo.js

@@ -9,7 +9,14 @@ require(['config/require-config'], function() {
       noticeOnUnload: 0,
 			container	: '#gjs',
 			height: '100%',
-			fromElement: true,
+			//fromElement: true,
+			components: [{
+				style:{
+					width:'100px',
+					height:'100px'
+				},
+				traits: ['title']
+			}],
 			storageManager:{ autoload: 0},
 
 			commands: 		{

src/dom_components/model/Component.js

@@ -1,5 +1,5 @@
-define(['backbone','./Components', 'SelectorManager/model/Selectors'],
-	function (Backbone, Components, Selectors) {
+define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitManager/model/Traits'],
+	function (Backbone, Components, Selectors, Traits) {
 
 		return Backbone.Model.extend({
 
@@ -35,6 +35,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors'],
 				this.components	= new Components(this.defaultC, opt);
 				this.set('components', this.components);
 				this.set('classes', new Selectors(this.defaultCl));
+				this.set('traits', new Traits(this.get('traits'), this));
 			},
 
 			/**

src/trait_manager/main.js

@@ -32,7 +32,7 @@ define(function(require) {
 					c.stylePrefix = ppfx + c.stylePrefix;
 
 				sectors = new Traits(c.traits);
-	  		SectView 	= new SectorsView({
+	  		TraitView = new TraitsView({
 					collection: sectors,
 					target: c.em,
 				  config: c,

src/trait_manager/model/TraitFactory.js

@@ -28,5 +28,5 @@ define(['backbone'],
 
       };
 
-    };
+    }();
 });

src/trait_manager/model/Traits.js

@@ -1,15 +1,20 @@
-define(['backbone','./Trait'],
-  function (Backbone, Trait) {
+define(['backbone','./Trait', './TraitFactory'],
+  function (Backbone, Trait, TraitFactory) {
 
     return Backbone.Collection.extend({
 
       model: Trait,
 
       add: function(models, opt){
-				if(typeof models === 'string'){
-	         //TraitFactory('href')  <-- cache it
+        // Use TraitFactory if necessary
+				if(typeof models === 'string' || models instanceof Array){
+          if(typeof models === 'string')
+            models = [models];
+          for(var i = 0, len = models.length; i < len; i++){
+            var model = models[i];
+            models[i] = TraitFactory.build(model)[0];
+          }
 				}
-
 				return Backbone.Collection.prototype.add.apply(this, [models, opt]);
 			},
 

src/trait_manager/view/TraitView.js

@@ -11,16 +11,20 @@ define(['backbone'], function (Backbone) {
 			this.pfx = this.config.stylePrefix || '';
 		},
 
+		onChange: function() {
+			//change model value
+		},
+
 		/**
 		 * On change callback
-		 * @param {Object} el Test
 		 * @private
 		 */
-		onChange: function(elView) { //<-- TraitRenderer
+		onValuesChange: function() {
 			var m = this.model;
-			var attrs = elView.model.get('attributes');
+			var trg = m.target;
+			var attrs = trg.get('attributes');
 			attrs[m.get('name')] = m.get('value');
-			elView.model.set('attributes', attrs);
+			trg.set('attributes', attrs);
 		},
 
 		/**