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

和我的 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 交换到输入字段中，但我认为这是一种不好的方法。这会不会给已经绑定(bind)的事件带来麻烦？像 'blur input.name': 'rename'

我怀疑为编辑创建一个新 View 是最好的方法，因为我想要内联编辑，对于这个名称字段，我不希望播放器模板的所有其余部分在播放器模板中重复，并且编辑播放器模板。

所以，归根结底，我的问题是: 处理内联编辑的最佳方式是什么

1. 单独的 View
2. 内联只是附加一个输入字段(不知道这是否适用于绑定(bind)事件)
3. 让我的模型为该属性保留一个状态变量(可行，但让模型保留 View 相关数据听起来很奇怪)

Answer 1

完全不同的选择:

使用 html EditableContent 功能进行内联编辑。无需更改 DOM/使 DOM 困惑，如果操作正确，将获得出色的用户体验，并在所有主流浏览器中得到支持。

一些 js 编辑器使用它，最著名的是 Aloha Editor (检查浏览器支持)，但对于不需要太多其他东西的属性编辑(例如富文本编辑等)，您可以轻松地推出自己的。

编辑:2012 年 6 月:

使用出色的范围库时，自己滚动变得容易得多: http://code.google.com/p/rangy/

嗯， 格尔特-简