Metamorph script tags being added to value attribute in Ember/Sproutcore 2.0

Question

I have the following controller which contains a view:

Lead.Controllers.UrlSearch = Ember.Object.extend
  init: ->
    @_super()

    @url_search = Lead.UrlSearch.create()

    @url_search.set('search_url', 'http://www.bdec-online.com/bd-cmpy/bd-cz.cfm')

    @view = Ember.View.create
      controller: @
      urlSearchBinding: 'controller.url_search'
      templateName: 'app/templates/url_search/show'

    @view.appendTo('#fieldset')

The template at app/templates/url_search/show is as follows

<label for="url_search_url">Url</label>
<input id="url_search_url" name="url_search[url]" size="30" type="search" value="{{urlSearch.search_url}}">
<button class="button" id="goButton" type="button">GO</button>

The view is rendered fine apart from the value parameter which has the metamorph script tags in like this:

<input id="url_search_url" name="url_search[url]" size="30" type="search" value="&lt;script id='metamorph-0-start' type='text/x-placeholder'&gt;&lt;/script&gt;http://www.bdec-online.com/bd-cmpy/bd-cz.cfm&lt;script id='metamorph-0-end' type='text/x-placeholder'&gt;&lt;/script&gt;">

Is there anyway I can stop these script tags getting rendered or is there a config setting somewhere to stop this?

Answer 1

If you want to avoid your property output getting wrapped in these markers, use the unbound helper:

My new car is {{unbound color}}.

Your output will be free of markers, but be careful, because the output won't be automatically updated!

My new car is blue.

(see http://emberjs.com/#toc_handlebars-basics)

Answer 2

This is precisely why the {{bindAttr}} helper is available. This should do the job for you:

<input id="url_search_url" name="url_search[url]" size="30"
 type="search" {{bindAttr value="urlSearch.search_url"}}>