我正在做一个带有实时预览的产品表单,只是为了好玩
哈佛商学院
<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不喜欢大写属性,我会研究一下。 现在使用小写属性名称。
<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
更新:
看起来与全局命名空间相关,显然大写属性推断全局命名空间绕过/禁用大写 -> Handlebars 模板中的全局推理?
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