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 中做到这一点，但是使用 ember 和车把有点难。

[edit] 我的页面查询的控制器：

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"}}>

希望对你有帮助