Keeping top and bottom panels in sync

[jellis]

I have a few layouts with a field in the middle area that is a summary value (such as count) of related records, and the related records are shown in a bottom tab. If I add new, relate, or unrelate child records from the bottom tab the value shown for the summary field does not automatically update in the middle panel. As a result I have implemented the following pattern multiple times. My question is if there is a better way to do this? Is there some other hook or event I can listen to in the detail view without having to define a custom bottom view every time?

define("custom:views/custom-detail", ["views/record/detail"], (Dep) =>
  Dep.extend({
    bottomView: "custom:views/custom-detail-bottom",
    setup() {
      Dep.prototype.setup.call(this);
      this.listenTo(this, "render", () => {
        this.model.fetch();
      });
    },
  }));
​

define("custom:views/custom-detail-bottom", ["views/record/detail-bottom"], (Dep) =>
  Dep.extend({
    setupPanels() {
      Dep.prototype.setupPanels.call(this);
      this.listenTo(this.model, "after:relate after:unrelate", () => {
        // reRender() blows away the current tab selection so
        // we need to grab it first then put it back after
        const activeTab = this._parentView.currentTab;
        this._parentView.reRender().then(() => {
          this._parentView.selectTab(activeTab);
        });
      });
    },
  }));
​

[yuri]

Not an answer. Just noting that you should use this.getParentView() instead of this._parentView.

[jellis]

Thank you, I never thought to look for getXyz() methods to access properties of this. I will keep that in mind moving forward.