Javascript 如何从基本视图重写render（）方法并向模板添加更多选项？

抱歉，就主干和把手而言，我是一个noob，你会发现我的问题是用一种我更熟悉的语言来表达的，即Java

我正在寻找一些我确信一定是经常使用的模式

我有一个单页应用程序，其中三个视图（我们称之为RealView1、RealView2和RealView3）从同一个基本视图扩展而来。这三种方法都没有显式的render（）方法；相反，基础视图有自己的render（），如下所示：

从上面可以看出，在构建BaseView时，BaseView有一个“只读”布尔值，它是通过选项传入的，即通过BaseView的initialize:函数（选项）。readOnly可以在任何相关的把手模板中引用

我现在想做的是扩展RealView3的功能（但仅限于该视图），向其中传递一个名为“canEditRule”的新选项；这需要使RealView3的Handlebar模板可用，与它的BaseView“父级”中的“只读”相同

我的问题是：我假设我需要以某种方式为RealView3提供它自己的render（）方法：

（a） 从BaseView实现/覆盖render（），并

（b） 除了BaseView中已经存在的只读选项外，还使canEditRule选项可用于RealView3 Handlebar模板

---

我读过主干和车把的文档后一点也不明智——也许我没有在正确的地方寻找正确的东西！有人能给我提供一个代码片段来满足我的需要吗？

您只需扩展

BaseView

并覆盖

render

方法：

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

---

请阅读更多关于

HOC（高阶组件）

@hamed hossani HOC似乎是一个概念？我没有使用ReactJS，我使用的是主干。

canEditRule

听起来很像

readOnly=false

。在创建

RealView3

时，不能将其作为false传递吗？

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