ember.jslive-preview

Ember- live preview image


I'm doing a product form with a live preview just for fun

HBS

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

And this live preview would come up simply using their values in {{ }}

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

So how would you do this nested binding or simply recommend another solution?

cheers

Kristjan


Solution

  • For some reason Ember doesn't like uppercase properties, I'll look into it. For now use a lowercase property name.

    <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

    Update:

    Looks related to a global namespace, apparently an uppercase property infers global namespace Bypass/disable uppercase -> global inference in Handlebars templates?

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

    Other update:

    You can always define the scope by qualifying your binding more.

     <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