Views

General rules

  • The view is NOT responsible to get its data !
  • Don’t call services in views,
  • Don’t route to a screen in views,
  • Shared views are singletons,
  • Don’t call parent in view properties (example below),
  • Don’t update child property directly, use methods (example below),
  • Add model as class property if data view is used by a model (example below)

Examples

Parent call

Don’t call parent in view properties:

WRONG:

export default $View.declare("ParentView", {
    properties: {
      title: "I am the title of the ParentView"
    },
    children: {
      titleView: {class: $ChildView}
    }
});

export default $View.declare("ChildView", {
    properties: {
      title: ({parent}) => parent.title // WRONG
    },
    children: {
      titleText: {
        class: $TextPrimitive,
        text: ({parent}) => parent.title
      }
    }
});

GOOD:

export default $View.declare("ParentView", {
    properties: {
        title: "I am the title of the ParentView"
    },
    children: {
        titleView: {class: $ChildView, title: ({parent}) => parent.title} // GOOD
    }
}
export default $View.declare("ChildView", {
    properties: {
        title: "I am a default title"
    },
    children: {
        titleText: {class: $TextPrimitive, text: ({parent}) => parent.title}
    }
}

Limit binding

Prefer update child property using method, instead of binding:

WRONG:

export default $View.declare("MyView", {
    properties: {
        title: ""
    },
    children: {
        titleText: {class: $TextPrimitive, text: ({parent}) => parent.title}
    }
}
let view = new MyView();
view.title = "I am the title of the View";

GOOD:

export default $View.declare("MyView", {
    children: {
        titleText: {class: $TextPrimitive}
    },
    methods: {
        setTitle: function (title) {
   this.titleText = title;
  }
    }
}
let view = new MyView();
view.setTitle("I am the title of the View");

Define model

Add model as class property if data view is a model:

WRONG:

export default $View.declare("ChannelView", {
    children: {
        channelName: {class: $TextPrimitive, text: ({parent}) => parent.data.name}
    }
}

GOOD:

import $Channel from "@Channel";

export default $View.declare("ChannelView", {
    properties: {
        data: {class: $Channel} // GOOD
    },
    children: {
        channelName: {class: $TextPrimitive, text: ({parent}) => parent.data.name}
    }
}

Use statics for states

Create statics for states to be able to reuse them

WRONG:

export default $View.declare("MyView", {
  methods: {
    manipulateStates: function () {
      this.setState("slided");
      this.setState("!slided");
    }
  }
});

GOOD:

export default $View.declare("MyView", {
  statics: {
    STATE_SLIDED: "slided"
  },
  methods: {
    manipulateStates: function () {
      this.setState(this.statics.STATE_SLIDED);
      this.setState("!" + this.statics.STATE_SLIDED);
    }
  }
});
Edit this page on GitHub
Prev
Services and Models