Javascript 主干视图代码的正确方法

我有一个侧视图列表，当单击列表中的一个项目时，我会显示相应的视图

我的代码如下：

查看

app.View.BrandSidePanelView = Backbone.View.extend({
      tagName: 'div',
      template: _.template($('#brand-side-panel').html()),
      template_brand: _.template($('#brand-create').html()),
      template_offer: _.template($('#offer-create').html()),

      initialize: function() {
          this.render();
      },

      events: {
          'click .bra-main': 'showBrandCreateView',
          'click .bra-off': 'showOfferCreate',
          'click .bra-cmgn': 'showCampaignCreate'
      },

      showBrandCreateView: function(e) {
          e.preventDefault();
          this.reset();
          $('.crt-cnt').html(this.template_brand());
      },

      showOfferCreate: function(e){
          e.preventDefault();
          this.reset();
          $('.crt-cnt').html(this.template_offer());
      }, 

      render: function() {
          $('.crt-cnt').html(this.template_brand());
          var $el = $(this.el);
          $el.html(this.template());
          return $(this.el);
      },

      reset: function(){
          $('.crt-cnt').empty();
      }
});

HTML

<div class="list-group">
    <div class="list-group-item bra-main"><i class="fa fa-angle-double-right"></i>&nbsp;<fmt:message key="brand" /></div>
    <div class="list-group-item bra-off"><i class="fa fa-angle-double-right"></i>&nbsp;<fmt:message key="brand.offer" /></div>
    <div class="list-group-item bra-cmgn"><i class="fa fa-angle-double-right"></i>&nbsp;<fmt:message key="brand.campaign" /></div>
</div>

---

这里的一切都是静态的。没有从服务器获取任何内容。我是个新手。当前代码可以正常工作，但我想知道我是否使用了正确的方法。

如果侧视图列表不会及时更改，可以这样做，它只是一种静态菜单

但是如果列表中的元素可能会更改，则必须将其包装到视图中，并从服务器获取元素