javascript - backbone.js: how to inline editing on attribute of a model - Stack Overflow

admin管理员组

文章数量:1310420

how would i add inline editing on attributes of a model,

for example, when i have a Player model

var Player = Backbone.Model.extend({
  defaults: {
    id: 0,
    name: '',
    points: 0
  },
  initialize: function(){
    // irrelevant stuff happening here...
  },
  rename: function(newName){
    this.set({ name: newName });
  }
});

and a playerRow view

var PlayerRow = Backbone.View.extend({
  tagName: 'li',
  className: 'player',
  events: { 
    'click span.score':  'score',
    'blur input.name': 'rename',
    'click div.playername': 'renderRename'
  },   
  initialize: function(){
    _.bindAll(this, 'render', 'rename');
    this.model.bind('change', this.render);
  },
  render: function(){
    var template = Tmpl.render("playerRow", { model : this.model });
    $(this.el).html(template);
    return this;
  },
  renderRename: function() {
    // i was thinking of switching the DOM into a textfield here
  },
  rename: function(){
    var inpt = $(this.el).find('input.name');
    var newName = (inpt.val() != '') ? inpt.val() : 'no-name';
    this.model.rename(newName);
  }
});

and my playerRow template

<script type="text/template" id="playerRow-template">
  <% if ( model.get('name') == '' ) { %>
    <div class="state-edit"><input type="text" class="name" name="name"></input></div>
  <% } else { %>    
    <div class="playername"><%= model.get('name') %></div>
  <% } %>
</script>

either i set a certain property of my model that holds the state (default or edit), which triggers a re-render and in my template instead of testing if name == '' i can test on that state property.

or i do it inline like i say in my ment in renderRename i just swap the DOM into an input field but i think this is a bad way to do it. Would this cause troubles with the already bound events? like 'blur input.name': 'rename'

i doubt creating a new view for the edit is the best way, because i want inline editing, for just this one name field, i don't want all the rest of the player template to be duplicate in the player template and the editplayer template.

so, bottomline, my question: what is the best way, to handle inline editing

1. a separate view
2. inline just appending an input field (don't know if this works well with the bound events)
3. having my model hold a state variable for this attribute (would work but sounds weird to have a model hold view related data)

how would i add inline editing on attributes of a model,

for example, when i have a Player model

var Player = Backbone.Model.extend({
  defaults: {
    id: 0,
    name: '',
    points: 0
  },
  initialize: function(){
    // irrelevant stuff happening here...
  },
  rename: function(newName){
    this.set({ name: newName });
  }
});

and a playerRow view

var PlayerRow = Backbone.View.extend({
  tagName: 'li',
  className: 'player',
  events: { 
    'click span.score':  'score',
    'blur input.name': 'rename',
    'click div.playername': 'renderRename'
  },   
  initialize: function(){
    _.bindAll(this, 'render', 'rename');
    this.model.bind('change', this.render);
  },
  render: function(){
    var template = Tmpl.render("playerRow", { model : this.model });
    $(this.el).html(template);
    return this;
  },
  renderRename: function() {
    // i was thinking of switching the DOM into a textfield here
  },
  rename: function(){
    var inpt = $(this.el).find('input.name');
    var newName = (inpt.val() != '') ? inpt.val() : 'no-name';
    this.model.rename(newName);
  }
});

and my playerRow template

<script type="text/template" id="playerRow-template">
  <% if ( model.get('name') == '' ) { %>
    <div class="state-edit"><input type="text" class="name" name="name"></input></div>
  <% } else { %>    
    <div class="playername"><%= model.get('name') %></div>
  <% } %>
</script>

either i set a certain property of my model that holds the state (default or edit), which triggers a re-render and in my template instead of testing if name == '' i can test on that state property.

or i do it inline like i say in my ment in renderRename i just swap the DOM into an input field but i think this is a bad way to do it. Would this cause troubles with the already bound events? like 'blur input.name': 'rename'

i doubt creating a new view for the edit is the best way, because i want inline editing, for just this one name field, i don't want all the rest of the player template to be duplicate in the player template and the editplayer template.

so, bottomline, my question: what is the best way, to handle inline editing

1. a separate view
2. inline just appending an input field (don't know if this works well with the bound events)
3. having my model hold a state variable for this attribute (would work but sounds weird to have a model hold view related data)

• javascript
• model-view-controller
• backbone.js

Share Improve this question Follow edited Sep 23, 2011 at 9:29 Sander asked Sep 23, 2011 at 9:20 SanderSander 13.4k1515 gold badges7373 silver badges9898 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

A different option altogether:

Inline edititing making use of the html EditableContent feature. No need for changing/cluttering the DOM, great user experience if done correctly, supported in all major browsers.

A couple of js-editors make use of this, most notably Aloha Editor (check for browser support), but for attribute editing without needing much else (e.g rich text editing etc) you can easily roll your own.

EDIT: June 2012:

Rolling your own bees much easier when using the excellent range Library: http://code.google./p/rangy/

Hth, Geert-Jan

I like to have an extra input field in the view that is hidden by default. (This is closest to your option (2), but it avoids conditionals in the template or adding elements on-the-fly.)

So the template might look something like this:

<div class="show-state">
    ... <%= name %> ...
    <input type="button" value="edit"/>
</div>
<div class="edit-state">   <!-- hidden with display: none in CSS -->
    ... <input type="text" value="<%= name %>"/> ...
</div>

Essentially, it's a view with two states, "showing" and "editing". When the user clicks "edit", I call this.$('.show-state').hide(); this.$('.edit-state').show(); to flip the state.

Once the edit gets submitted or canceled, I just have the view rerender itself (after talking to the server and updating the model's attributes if necessary) to revert to the original "show" state and reset the input field.

P.S. Keep in mind that my code enables XSS because it does not escape name.

本文标签： javascriptbackbonejs how to inline editing on attribute of a modelStack Overflow