Emberjs從數組集合中獲得一個值

Question

我最近使用bootstrap實現了一個縮略圖的小畫廊，並且我希望使用該模式可以在更大尺寸的彈出窗口中打開圖像。

到目前爲止，我已經觸發了模式，但我不知道如何顯示單擊某個圖像的特定值。

這是我的縮略圖生成：

<div class="row"> 
    {{#each value in images}} 
     <div class="col-md-4"> 
      <a class="thumbnail" data-toggle="modal" data-target="#myModal"> 
       <img src="data:{{unbound value.mimeType}};base64,{{unbound value.image}}"> 
      </a> 
     </div> 
    {{/each}} 
</div> 

這裏我的模式（很基本的一個）：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">title of my image</h4> 
      </div> 
      <div class="modal-body"> 
       Images here 
      </div> 
     </div> 
    </div> 
</div> 

是否有可能與車把檢索一個特定的值，顯示在我的模式？

我會知道如何做到這一點在js中，但與燼和把手它有點難。

[編輯]我的網頁查詢的控制器：

App.EnquiryController = Ember.ObjectController.extend({ 
    isUpdating: false, 

    actions: { 
     showUpdateForm: function() { 
      this.setProperties({ isUpdating: true }); 
     }, 
     customerUpdate: function() { 
      this.setProperties({ isUpdating: false}); 
      var data = this.get('model'); 
      var obj = { 
       customerName: data.enquiry.customerName, 
       customerEmail: data.enquiry.customerEmail, 
       customerPhone: data.enquiry.customerPhone 
      }; 
      console.log(obj); 
      Ember.$ 
      .post(host + '/enquiry/' + data.enquiry.id, obj, function(data) { 
       console.log('DEBUG: Updating customer data OK'); 
      }); 
     }, 
     cancelCustomerUpdate: function() { 
      this.setProperties({isUpdating: false}); 
     }, 
     tradeInUpdate: function() { 
      var data = this.get('model'); 
      var obj = { 
       mileage: data.tradeIn.mileage, 
       valuationPrice: data.tradeIn.valuationPrice 
      }; 
      console.log(data); 
      Ember.$ 
      .post(host + '/enquiry/' + data.enquiry.id + '/tradeIn', obj, function(data) { 
      console.log('DEBUG: Update TradeIn OK') 
      }) 
     }, 
     summaryUpdate: function() { 
      var data = this.get('model'); 
      var obj = { 
       deposit: data.totals.deposit, 
       discount: data.totals.discount 
      }; 
      Ember.$ 
      .post(host + '/enquiry/' + data.enquiry.id, obj, function(data) { 
       console.log('DEBUG: Update Summary OK'); 
      }); 
      console.log(obj); 
     } 
    } 
}); 

我有很多有使用標籤引導隱藏和顯示其數據顯示。

[EDIT2]錯誤：

Uncaught TypeError: Object function() { 
if (!wasApplied) { 
    Class.proto(); // prepare prototype... 
} 
o_defineProperty(this, GUID_KEY, undefinedDescriptor); 
o_defineProperty(this, '_super', undefinedDescriptor); 
var m = met...<omitted>...t' 

[EDIT3]我得到了良好的圖像鏈接，但我不能設置從視圖控制器變..

var ClientView = Em.View.extend({ 
    actions: { 
     selectItem : function(item) { 
      console.log(item.uri); 
      App.EnquiryController.set("imageSrc", item.uri); 
     } 
    } 
}); 

{{#view ClientView}} 
    <div class="row"> 
     {{#each value in images}} 
     <div class="col-md-4"> 
      <a class="thumbnail" data-toggle="modal" data-target="#myModal" {{action "selectItem" this.value target="view"}}> 
       <img src="data:{{unbound value.mimeType}};base64,{{unbound value.image}}"> 
      </a> 
     </div> 
     {{/each}} 
    </div> 
{{/view}} 

在我的控制器：

App.EnquiryController = Ember.ObjectController.extend({ 
    imageSrc: null 
}); 

Answer 1

我在其他情況下有這個問題。所以，我做的是

{{#view ClientView}} 
<div class="row"> 
    {{#each value in images}} 
     <div class="col-md-4"> 
      <a class="thumbnail" data-toggle="modal" data-target="#myModal" {{#action selectItem this target="view"> 
       <img src="data:{{unbound value.mimeType}};base64,{{unbound value.image}}"> 
      </a> 
     </div> 
    {{/each}} 
</div> 
{{/view}} 

然後在視圖，例如：

var ClientView = Em.View.extend({ 
    actions: { 
    selectItem : function(item){ 
     ClientController.set("imageSrc", item.src); 
    } 
    } 
}) 

而且在模式我把這個：

<img {{bindAttr src="ClientController.imageSrc"}}> 

我希望這可以幫助你