I am able to display image and other source in my index page using dataTransform. but i have problem of displaying the same source image in my detail view. I post all my code and my error is It doesn't display image but other attribute
// index.xml
<Alloy>
<Collection src="products"/>
<Window class="container">
<TableView filterAttribute="title" dataCollection="products" id="productTableView" dataTransform="myTransformer">
<SearchBar platform="android,ios"id="search" barColor="#000" showCancel="true" height="43" top="0" />
<TableViewRow height="150dp" productId="{productid}">
<View layout="vertical" top="10">
<View height="150" layout="horizontal">
<View backgroundColor="white" left="5dp" width="40%">
// image here
<ImageView image="{my_image}"></ImageView>
</View>
<View backgroundColor="white" layout="vertical" left="15dp" width="50%">
<Label id="titel" text="{title}"></Label>
<Label id="price" text="{price},{currency}"></Label>
</View>
</View>
</View>
</TableViewRow>
</TableView>
</Window>
</Alloy>
// productdetails.xml
<Alloy>
<Window id="detailWindow" class="container" onClick="CloseWindow">
<View layout="vertical" top="100dp">
<ImageView image="{my_image}" width="96%"></ImageView>
<Label id="titel" text="{title}"></Label>
<Button id="closeBtn" title="Back"></Button>
</View>
</Window>
</Alloy>
//index.js
Alloy.Collections.products.fetch();
function myTransformer(model) {
var transform = model.toJSON();
transform.my_image = transform.images[0].sizes['100'];
return transform;
}
$.index.open();
var args = arguments[0] || {};
var collection = Alloy.Collections.products;
collection.fetch({
success : function(){
_.each(collection.models, function(element, index, list){
element.attributes.productid = element.cid;
});
},
error : function(){
Ti.API.error("hmm - this is not good!");
}
});
$.productTableView.addEventListener('click', function(_event) {
// get the correct model
var model =
Alloy.Collections.products.getByCid(_event.rowData.productId);
model.__transform = {};
// create the controller and pass in the model
var detailController = Alloy.createController('productdetails', {
$model : model
});
// get view returns the root view when no view ID is provided
detailController.getView().open({
model : true
});
});
//productdetails.js
var args = arguments[0] || {};
// close the window when button is clicked
$.closeBtn.addEventListener('click', function() {
CloseWindow();
});
function CloseWindow()
{
$.detailWindow.close();
}
// Free model-view data binding resources when this
// view-controller closes
$.detailWindow.addEventListener('close', function() {
$.destroy();
});
If you want to use data binding on the detail page the trick is to pass the model as $model
. In the detail view simply use {attributeName}
. I believe Alloy does expect $model.__transform
to exist. So before you pass it be sure to add that (simply an empty object).
// get the correct model
var model =
Alloy.Collections.products.getByCid(_event.rowData.productId);
model.__transform = {};
// create the controller and pass in the model
var detailController = Alloy.createController('productdetails', {
$model : model
});