如何使用 dataTransform 在详细视图中显示图像？

Question

我可以使用 dataTransform 在我的索引页面中显示图像和其他来源。 但我在详细视图中显示相同的源图像时遇到问题。 我发布了我所有的代码，我的错误是 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();
});

Answer 1

如果您想在详细信息页面上使用数据绑定，技巧是将模型作为$model 传递。在详细视图中，只需使用{attributeName}。我相信 Alloy 确实希望 $model.__transform 存在。所以在你通过之前一定要添加它（只是一个空对象）。

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