Titanium appcelerator model and collections persistance

Question

I am about to retrieve datas from remote and create model and collections, here are each part of the app (the controller, the view and the model). If i really understand using model in titanium is like storing into database so the data persists even if there is no internet connection after i get all datas. Below code works well, it seems no data is displayed after connection is lost, so i ask myself what is the advantage of using models in titanium instead of using classic way : retrieve from xhr and display data ? 2- My second question (if i am wrong) after retrieving datas and storing into model, i can retrieve it without xhr again inside another page? 3- And the last one : is it a good practice to retrieve data from alloy.js and save to model because i need datas in all my app pages ?

THE CONTROLLER

// This is an istance of my xhr library
var XHR = require('xhr');
var xhr = new XHR();

$.win.addEventListener('open', function(){
  
  url = 'mydomain.com/api/get_posts';
  xhr.get(url, onSuccess, onError);

});

function onSuccess(response){
  
  if(typeof response !== null ){
   datas = JSON.stringify(response.data);
   postsModel = [];
   _.each(datas, function(data){
     
     /* Create model */
     postsModel.push(Alloy.createModel('mypostsmodel',{
       title : data.title,
       id : data.id
     }));
     
   });
    
    $.posts.reset(postsModel);
  }
}

** THE VIEW **

<Alloy>
	<Collection src="myposts" instance="true" id="myposts" />
	<Window id="win" title="Inscription" class="container" >
		<View id="posts_view" class="myposts" dataCollection="$.myposts">
				<View postId="{id}" class="post_item">
					<Label class="post_label" text="{title}" />
					<Label class="exp" id="exp_{id}" text="" />
				</View>
			</View>
		</View>
</Alloy>

THE MODEL

exports.definition = {
	config: {
		"columns": {
            "title": "Text",
            "id": "Integer"
        },
        "defaults": {
            "title": "-",
            "id": "-"
        },
		adapter: {
			type: "sql",
			collection_name: "myposts"
		}
	},
	extendModel: function(Model) {},
    ...

Thank you all.

trey-jones trey-jones · Accepted Answer · 2016-06-13T17:39:41

The advantage in my opinion a clearer definition of the View. In my opinion the biggest thing Alloy brings to the table is the ability to more cleanly separate your view from the logic that drives your application. Your logic is also simplified (in most cases!) because all you need to do is add the data to the collection, and Alloy handles the display.

The alternative to how you are doing it:

_.each(datas, function(data){
 var container = Ti.UI.createView({class: "post_item"}),
   title = Ti.UI.createLabel({
     text: data.title,
     class: "post_label"
   }),
   exp = Ti.UI.createLabel({class: "exp"});

   container.add(title);
   container.add(exp);
   $.posts_view.add(container);
});

I've done it both ways, and even with alloy, sometimes it is necessary to do this, because of the limitations of Backbone as implemented in Titanium - but I think clearly if you can include your repeating UI components in the markup, it's easier to read and maintain.

Titanium appcelerator model and collections persistance

1 Answers