卸载主干视图并注销事件

我正在尝试创建一个简单的编辑器，在这里你可以点击一个元素，用简单的输入加载一个脚本模板，当我键入时，我希望更新到DOM元素。问题是，如果我点击标题，那么介绍并开始键入标题和介绍的文本都会更新。如何"卸载"视图并只让一个视图存在？

$(function() {
  window.Brick = Backbone.View.extend({
    initialize: function() {},
    render: function() {
      this.$el.mouseenter(function() {
        $(this)
          .css('outline', 'solid #467ace 1px')
          .css('outline-offset', '-1px')
          .css('cursor', 'pointer');
      }).mouseleave(function() {
        $(this)
          .css('outline', 'none')
          .css('cursor', 'default');
      });
    },
    events: {
      "click": "openEditor"
    },
    openEditor: function(event) {
      event.preventDefault();
      console.log('load editor');
      var self = this;
      self.editorView = new MyView({
        el: $('#editor-panel'),
        editorName: self.$el.attr('data-brick-name'),
        editor: self.$el
      });
    }
  });
  window.MyView = Backbone.View.extend({
    editorName: null,
    editor: null,
    initialize: function(options) {
      _.extend(this, _.pick(options, "editorName"));
      _.extend(this, _.pick(options, "editor"));
      this.render();
    },
    render: function() {
      var self = this;
      // Compile the template using underscore
      var template = _.template($('#' + self.editorName).html());
      // Load the compiled HTML into the Backbone "el"
      this.$el.html(template);
    },
    events: {
      'keyup :input': 'logKey'
    },
    logKey: function(e) {
      console.log($(this.editor).text());
      $(this.editor).text($(e.currentTarget).val());
    }
  });
});
$(function() {
  $('[data-editable="true"]').each(function(e) {
    console.log(e);
    var self = $(this);
    var brick = new Brick({
      el: self
    }).render();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<h1 data-editable="true" data-brick-name="heading">Lorem ipsum</h1>
<p data-editable="true" data-brick-name="intro">Lorem ipsum dolar sit amet...</p>
<div id="editor-panel">
</div>
<script type="text/template" id="heading">
  <label for="Heading">Rubrik</label>
  <input name="Heading" type="text" value="Lorem ipsum" />
</script>
<script type="text/template" id="intro">
  <label for="Intro">Intro</label>
  <textarea name="Intro">Lorem ipsum dolar sit amet...</textarea>
</script>