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

Question

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

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

How to display image in detail view using dataTransform?

xml

titanium

titanium-alloy