未呈现 Backbone.js 子视图,“未捕获的引用错误:视图未定义”错误返回

lc8prwob  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(112)

我正在一个使用Backbone.js和jQuery的网站上工作,我试图渲染一个子视图,该子视图必须显示当前页面的描述,根据下拉菜单中的选择加载。我在网站上搜索了更多信息,但我仍然停留在这一点上。请帮助!
下面是我必须在其中加载描述视图的主视图:

const InquiryContentView = Backbone.View.extend(
  {
    el: $('#inquiryContent'),
    events: {
      'change #styles': 'renderTabs',
      'click li.tab': 'renderTabPanel'
    },
    initialize: function () {
      const view = this
      this.inquiryContent = new InquiryContent
      this.inquiryContent.fetch(
        {
          success: function () {
            view.listenTo(view.inquiryContent, 'update', view.render)
            view.render()
          }
        })
    },
    render: function () {
      const data = []
      this.inquiryContent.each(function (model) {
        const value = {}
        value.id = model.id
        value.text = model.id
        value.disabled = !model.get('active')
        data.push(value)
      })
      data.unshift({id: 'none', text: 'Select One', disabled: true, selected: true})
      this.$el.append('<h2 class="pageHeader">Inquiry Content</h2>')
      this.$el.append('<select id="styles"></select>')
      this.$stylesDropdown = $('#styles')
      this.$stylesDropdown.select2(
        {
          data: data,
          dropdownAutoWidth: true,
          width: 'element',
          minimumResultsForSearch: 10
        }
      )
      this.$el.append('<div id="navWrapper"></div>')
      this.$el.append('<div id="tNavigation"></div>')
      this.$navWrapper = $('#navWrapper')
      this.$tNavigation = $('#tNavigation')
      this.$navWrapper.append(this.$tNavigation)
      this.$el.append('<div id="editorDescription"></div>')
    },
    renderTabs: function (id) {
      const style = this.inquiryContent.findWhere({id: id.currentTarget.value})
      if (this.clearTabPanel()) {
        this.clearTabs()
        this.tabsView = new TabsView({style: style})
        this.$tNavigation.append(this.tabsView.el)
      }
    },
    renderTabPanel (e) {
      const tabModel = this.tabsView.tabClicked(e.currentTarget.id)
      if (tabModel && this.clearTabPanel()) {
        this.tabPanel = new TabPanelView({model: tabModel})
        this.$tNavigation.append(this.tabPanel.render().el)
      }
    },
    clearTabs: function () {
      if (this.tabsView !== undefined && this.tabsView !== null) {
        this.tabsView.remove()
      }
    },
    clearTabPanel: function () {
      if (this.tabPanel !== undefined && this.tabPanel !== null) {
        if (this.tabPanel.dataEditor !== undefined && this.tabPanel.dataEditor.unsavedChanges) {
          if (!confirm('You have unsaved changes that will be lost if you leave the page. '
                       + 'Are you sure you want to leave the page without saving your changes?')) {
            return false
          }
          this.tabPanel.dataEditor.unsavedChanges = false
        }
        this.tabPanel.remove()
      }
      return true
    }
  }
)

我正在尝试渲染子视图,并添加了以下方法:

renderDescription () {
  this.$editorDescription = $('#editorDescription')
  this.descView = new DescView({model: this.model})
  this.$editorDescription.append(this.descView)
  this.$editorDescription.html(DescView.render().el)
}

它必须在id ='editorDescription'的div元素中呈现,但我收到了Uncaught ReferenceError: DescView is not defined
以下是DescView的实作方式:

window.DescView = Backbone.View.extend(
  {
    el: $('#editorDescription'),
    initialize: function () {
      _.bindAll(this, 'render')
      this.render()
    },
    render: function () {
      $('#editorDescriptionTemplate').tmpl(
          {
             description: this.model.get('description')})
                                    .appendTo(this.el)
          }
      );

我做错了什么?

tvmytwxo

tvmytwxo1#

DescView的实现不完整。缺少一堆右大括号和方括号。这就是它未定义的原因。

相关问题