backbone.js - 交换/切换/交换backbone.js View 到位吗？

Question

我正在为联系人管理器在backbone.js 中实现查看/编辑 View 。 Web 建议创建一个带有名为 ContactView 和 ContactEdit 的 subview 的 Contact 类。问题是，这些需要在 DOM 中占用相同的 el，所以我不能将子级嵌套在父级中。那是因为从外部来看，我希望家长 View 仅涉及“联系人”，就好像 children 是私有(private)的一样。我尝试了这个，第一次渲染()时它就起作用了:

initialize: function() {
    this.view[0] = new CL.Views.ContactView({model: this.model, el: this.el});
    this.view[1] = new CL.Views.ContactEdit({model: this.model, el: this.el});
},
render: function() {
    this.view[0].render();
    return this;
}

但是我无法交换观点。我尝试了 this.view[0].remove() 以及我能想到的所有方法，但就是无法使用相同的 el 使浏览和编辑 View 彼此交换。

我认为这意味着最好在一个 View 中包含两个模板并交换它们，这已经基本上可以工作了。我认为这是backbone.js 不能很好地处理DOM 中同一级别 View 的继承。

我宁愿避免使用backbone.js扩展，但我愿意遵循他们实现的任何模式。我尝试以“正确”的方式执行此操作，因为查看/编辑是我们应用程序中表单的常见模式。

附注陈述这个问题的另一种方法是，如果没有父 View 包围它们，如何隐藏 View 并将其替换为backbone.js中的另一个 View ？

预先感谢您提供的任何帮助。

Answer 1

我不太明白您是否想要一个模型的集合的 View ，或者您想要一个处理单个模型<的 View ？

如果是单个模型的 View ，

然后您就可以坚持一种 View 。只需让一些事件监听您启用或禁用编辑功能的操作即可。 (您甚至可以通过在 dom 元素上设置 contenteditable="true"来做到这一点)

我强烈建议使用一些工具，例如 backbone.marionette或卓别林。它们将为您节省大量时间。

以下示例适用于 Backbone.Marionette

示例模板

<script type="text/template" id="contact-view-template">
  <span data-bind="firstName"></span>
  <span data-bind="lastName"></span>
  <span data-bind="email"></span>
  <a href="#" data-action="edit">
  <a href="#" data-action="save" style="display:none">
</script>

查看代码:

ContactView = Marionette.ItemView.extend({
  template:"#contact-view-template",
  events:{
    "click [data-action=edit]":"edit",
    "click [data-action=save]":"save"
  },
  edit:function(){
    this.$("[data-action=edit]").hide();
    this.$("[data-action=save]").show();
    this.$("[data-bind]").attr("contenteditable",true);
  },
  save:function(){
    var value = {};
    _.each(this.$("[data-bind]",function(el){
      value[el.dataset['bind']]= $(el).val() || $(el).text();
    }));
    this.model.set(value);
    // add your validation here
    this.model.save();
  }
});

如果您想要多个编辑 View ，则不仅仅是:

ContactListEditView = Marionette.CompositeView.extend({
  itemView:ContactView.extend({
    tagName:"li"
  }),
  itemViewContainer:"ul",
  template:_.template("<h1>ContactList</h1><p>feel free to edit</p><ul></ul>")
});

如果您需要 1 个编辑 View 和多个不可编辑 View

(我希望我没有犯任何严重的错误):

ContactEditView = Marionette.ItemView.extend({
  template:"#contact-edit-view", // your template & bindings
  events:{
    "click [data-action=save]":"save"
  },
  save:function(){
    var value = {};
    _.each(this.$("[data-bind]",function(el){
      value[el.dataset['bind']]= $(el).val() || $(el).text();
    }));
    this.model.set(value);
    this.model.save();
  }
});


ContactListView = Marionette.CompositeView.extend({
  itemView:Marionette.ItemView.extend({
    template:"#contact-view-template",
    events:{
      "click [data-action=edit]":"edit"
    },
    edit:function(){
      this.trigger("edit",this);
    }
  }),
  regions:{
    "edit":"[data-region=edit]"
  },
  initialize:function(){
    this.on("itemview:edit",function(view){
      this.edit.show(new ContactEditView({model:view.model}));
    }.bind(this));
  }
});