Ember - изображение для предварительного просмотра в реальном времени

Я делаю форму продукта с предварительным просмотром в реальном времени просто для удовольствия

ОБД

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

Итак, как бы вы сделали эту вложенную привязку или просто порекомендовали бы другое решение?

ваше здоровье

Кристьян


live-preview ember.js
person kris    schedule 11.01.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

По какой-то причине 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

person Kingpin2k    schedule 11.01.2014