Ember-实时预览图像答案

【问题标题】：Ember- live preview imageEmber-实时预览图像
【发布时间】：2014-01-11 12:42:53
【问题描述】：

我正在制作带有实时预览的产品表单，只是为了好玩

哈佛商学院

<div class="col-md-6 col-xs-12">
        <label>Product name: </label>
        {{input type="text" placeholder="First name" value=newProductname class="form-control"}}
    </div>
    <div class="col-md-3 col-xs-12">
        <label>Price: </label>
        {{input type="text" placeholder="$$" value=price class="form-control"}}
    </div>
    <div class="col-md-3 col-xs-12">
        <label>Image location: </label>
        {{input type="text" placeholder="Url" value=Url class="form-control"}}
    </div>

这个实时预览会简单地使用它们在 {{ }}

中的值

<h1>{{newProductname}}</h1>
<p>{{price}}$</p>
<p>{{description}}<p>
<img {{bind-attr src="need Url value here"}}></img>

那么，您将如何进行这种嵌套绑定或简单地推荐其他解决方案？

干杯

克里斯蒂安

【问题讨论】：

标签： ember.js live-preview

【解决方案1】：

出于某种原因，Ember 不喜欢大写属性，我会研究一下。现在使用小写的属性名称。

<div class="col-md-3 col-xs-12">
    <label>Image location: </label>
    {{input type="text" placeholder="Url" value=url class="form-control"}}
</div>

<img {{bind-attr src=url}}>

http://emberjs.jsbin.com/idUWEGU/2/edit

更新：

看起来与全局命名空间有关，显然大写属性推断全局命名空间Bypass/disable uppercase -> global inference in Handlebars templates?

http://emberjs.jsbin.com/idUWEGU/1/edit

其他更新：

您始终可以通过更多地限定您的绑定来定义范围。

 <div class="col-md-3 col-xs-12">
    <label>Image location: </label>
    {{input type="text" placeholder="Url" value=controller.Url class="form-control"}}
</div>
<img {{bind-attr src=controller.Url}}>

http://emberjs.jsbin.com/idUWEGU/3/edit

【讨论】：