backbone.js: как встроить редактирование по атрибуту модели

Question

как добавить встроенное редактирование атрибутов модели,

например, когда у меня есть Player модель

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

и playerRow просмотр

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);
  }
});

и мой шаблон playerRow

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

либо я устанавливаю определенное свойство моей модели, которое содержит состояние (по умолчанию или редактирование), которое вызывает повторную визуализацию, и в моем шаблоне вместо тестирования if name == '' я могу проверить это свойство состояния.

или я делаю это встроенным, как я сказал в своем комментарии в renderRename, я просто меняю DOM в поле ввода, но я думаю, что это плохой способ сделать это. Не вызовет ли это проблемы с уже связанными событиями? как 'blur input.name': 'rename'

я сомневаюсь, что создание нового представления для редактирования - лучший способ, потому что я хочу встроенное редактирование, только для этого одного поля имени, я не хочу, чтобы все остальные шаблоны проигрывателя дублировались в шаблоне проигрывателя и шаблон editplayer.

итак, мой вопрос: Каков наилучший способ обработки встроенного редактирования

1. отдельный вид
2. встроенный просто добавление поля ввода (не знаю, хорошо ли это работает со связанными событиями)
3. если бы моя модель содержала переменную состояния для этого атрибута (сработало бы, но звучит странно, если бы данные, связанные с представлением модели, содержали)

Answer 1

Другой вариант:

Встроенное редактирование с использованием функции html EditableContent. Нет необходимости менять / загромождать DOM, отличный пользовательский интерфейс, если все сделано правильно, поддерживается во всех основных браузерах.

Несколько js-редакторов используют это, прежде всего Aloha Editor (проверьте поддержку браузера), но для редактирования атрибутов, не требуя многого другого (например, редактирование расширенного текста и т. Д.), Вы можете легко свернуть твой собственный.

РЕДАКТИРОВАТЬ: июнь 2012 г .:

Прокатить свой собственный становится намного проще при использовании превосходного диапазона Библиотека: http://code.google.com/p/rangy/

Hth, Герт-Ян

Answer 2

Мне нравится иметь дополнительное поле ввода в представлении, которое скрыто по умолчанию. (Это наиболее близко к вашему варианту (2), но он позволяет избежать условных выражений в шаблоне или добавления элементов на лету.)

Таким образом, шаблон может выглядеть примерно так:

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

По сути, это представление с двумя состояниями: «показ» и «редактирование». Когда пользователь нажимает «изменить», я звоню this.$('.show-state').hide(); this.$('.edit-state').show();, чтобы изменить состояние.

После того, как редактирование отправлено или отменено, у меня просто есть само представление перерисовки (после разговора с сервером и обновления атрибутов модели, если необходимо), чтобы вернуться к исходному состоянию "show" и сбросить поле ввода.

P.S. Имейте в виду, что мой код включает XSS, потому что он не экранирует name.