Backbone Model object passed between Alloy controllers have null properties

Question

I've started using titanium yesterday and i'm using the 'Creating your first titanium app' tutorial (this one).

When it gets on the part that you click on a row and it opens another view, my argument values are null. Here's my code:

Bookdetails.js

var args = arguments[0] || {};
$.titleLabel.text = args.Title || 'Default Title';
$.authorLabel.text = args.Author || 'Default Author';

index.js

var myBooks = Alloy.Collections.Books;
var myBook = Alloy.createModel('Books', {Title:'Bleach',Author: 'Kubo Tite'});

myBooks.add(myBook);
myBook.save();

function showBook(event){
    var selectedBook = event.source;
    var args = {'Title': selectedBook.Title, 'Author': selectedBook.Author};    
    var bookDetails = Alloy.createController("Bookdetails",args).getView();
    bookDetails.open();
}

$.index.open();

Bookdetails.xml

<Alloy>
    <Window class="container">
        <Label id="titleLabel"></Label>
      <Label id="authorLabel"></Label> 
    </Window>
</Alloy>

And my Books (model) definition:

exports.definition = {
    config: {
        columns: {
            "Title": "text",
            "Author": "text"
        },
        adapter: {
            type: "sql",
            collection_name: "Books"
        }
    },
    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
        });

        return Collection;
    }
};

Index.xml

<Alloy>
    <Collection src="Books" />
    <Window class="container">

        <TableView dataCollection="Books">
            <TableViewRow onClick="showBook" title="{Title}"></TableViewRow>
        </TableView>

        <Menu id="menu" platform="android">
            <MenuItem id="addBooks" title="Adicionar" onClick="callAddBook"  showAsAction="Ti.Android.SHOW_AS_ACTION_IF_ROOM" />
        </Menu>

    </Window>
</Alloy>

When i run my app, it show 'Default Author' and 'Default Title'. I'm running the app on android (samsung s3)

Answer 1

When you are handling event triggered by TableView in event.source you don't get Backbone Object which was used to generate for that row but Titanium.UI.TableViewRow object.

Also it's better to access event.row instead of event.source when you are operating on TableView (check documentation to see difference).

To make this example work just change showBook function to:

function showBook(event){
    var selectedBook = myBooks.where({Title: event.row.title})[0];
    var args = {'Title': selectedBook.get('Title'), 'Author': selectedBook.get('Author')};
    var bookDetails = Alloy.createController("Bookdetails", args).getView();
    bookDetails.open();
}

Also instead of creating new args object and sending it to Bookdetails controller you can send unmodified Backbone Model object to make easier any further modifications on it:

function showBook(event){
    var selectedBook = myBooks.where({Title: event.row.title})[0];
    var bookDetails = Alloy.createController("Bookdetails", selectedBook).getView();
    bookDetails.open();
}

Bookdetails.js

var args = arguments[0] || {};

$.titleLabel.text = args.get('Title') || 'Default Title';
$.authorLabel.text = args.get('Author') || 'Default Author';