xmltitaniumtitanium-alloy

How to display image in detail view using dataTransform?


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();
});


Solution

  • 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
    });