backbone.js 如何从基础视图中覆盖render()方法并向模板添加更多选项?

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

抱歉,我是一个新手在 Backbone 和车把方面,你会看到,我的问题是措辞方面的语言,我知道得多,即Java。
我在找一件我肯定是经常使用的图案。
我有一个单页面应用程序,其中有三个视图(我们称它们为RealView 1、RealView 2和RealView 3)从同一个基本视图扩展而来。相反,基础视图有自己的render(),如下所示:

render: function () {
        console.log("I am BaseView");
        this.$el.html(this.template({readOnly: this.readOnly}));
        ...
        return this;
    }

从上面可以看出,BaseView有一个“readOnly”布尔值,它在构造BaseView时通过选项传入,即通过BaseView的初始化:函数(选项). readOnly,然后可以在任何相关的Handlebars样板中引用。
我现在要做的是扩展RealView 3的功能(但仅限于该视图),以便将一个名为'canEditRule'的新选项传递给它;这需要使其可用于RealView 3的Handlebars模板,就像其BaseView“parent”中的“readOnly”一样。
我的问题是这样的:我假设我需要以某种方式为RealView 3提供它自己的render()方法,该方法:
(a)从BaseView实现/覆盖render(),以及
(b)除了BaseView中已存在的readOnly选项之外,使canEditRule选项可用于RealView 3 Handlebars模板
阅读了Backbone & Handlebars文档后,我并没有变得更聪明--也许我没有在正确的地方寻找正确的东西!有人能好心地为我提供一个代码片段吗?

6pp0gazn

6pp0gazn1#

您只需扩展BaseView并覆盖render方法:

const RealView3 = BaseView.extend({
  // ...
  render() {
      this.$el.html(
          this.template({
              readOnly: this.readOnly,
              canEditRule: this.canEditRule,
          })
      );
  }
});

相关问题