Question

我正在一个使用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)
          }
      );

我在做什么错了？

Answer 1

您对DescView的实现不完整。您缺少一堆闭合的花括号和括号。这就是为什么它是未定义的。

未呈现主干子视图，返回“ Uncaught ReferenceError：未定义视图”错误

1 个答案: