CODEWITHSUNDEEP
backbone.js
Eric Hu
Eric Hu

Reputation: 18218

Backbone.js edit text field only displaying first word

I'm seeing a strange bug with my Backbone.js project. Create, new, edit and delete actions work properly. When rendering the edit action for an object with text as an attribute, only the first word of that text is displayed in the text box. On the index, the full text is displayed.

The strange thing is, if I click "edit", and then just confirm, Backbone sends a PUT request to the server with the original text (as opposed to only the first word, which is what I see in the browser).

E.g.

Create Post with text "foo bar"

index shows: "foo bar"

edit shows: "foo"

clicking save -> index shows "foo bar"

Firebug confirms server responded to PUT with 200 OK, "text": "foo bar"

Edit: The code I used is pretty close to the boilerplate generated by the backbone-rails gem

In my template:

<form id="edit-post" name="post">
  <div class="field">
    <label for="content"> content:</label>
    <input type="text" name="content" id="content" value=<%= content %> >
  </div>

  <div class="actions">
    <input type="submit" value="Update Posts" />
  </div>

</form>

In my edit view

events :
  "submit #edit-posts" : "update"

update : (e) ->
  e.preventDefault()
  e.stopPropagation()

  @model.save(null,
    success : (posts) =>
      @model = posts
      window.location.hash = "/#{@model.id}"
  )

render : ->
  $(this.el).html(this.template(@model.toJSON() ))

  this.$("form").backboneLink(@model)

  return this

Upvotes: 0

Views: 807

Answers (1)

Derick Bailey
Derick Bailey

Reputation: 72878

you need quotes around your value in the template

 <input type="text" name="content" id="content" value="<%= content %>" >

without the quotes, you end up with markup that looks like this:

<input ... value=foo bar>

a single space is significant in attributes. this has the effect of being value="foo" or the equivalen of this:

<input ... value="foo" bar>

by adding the quotes in your template, around the <%= content %> for the value, you'll generate the correct HTML:

<input ... value="foo bar">

which will display the value correctly, on the screen

Upvotes: 4

Related Questions