You will require babel's syntax-decorators babel to use decorators
Example usages (If you need more info on what they're referring to, look at marionette documentation on those functions/objects)
Set an appRoute for marionette router example
import { appRoute } from "marionette-decorators";
import { AppRouter } from "marionette";
class MyRoute extends AppRouter {
@appRoute("myRoute(/)")
onMyRoute (params) {
/** Show the page **/
}
}
export default MyRoute;
Set an any attribute before app is initialized example
import { attribute } from "marionette-decorators";
import { View } from "marionette";
@attribute("isValid", true)
class MyView extends View {
initialize (params) {
/** Set is valid to false **/
this.isValid = false;
}
}
export default MyView;
Setup any number of attributes before app is initialized example
import { attributes } from "marionette-decorators";
import { View } from "marionette";
@attributes({
isValid: true,
model: new Backbone.Model()
})
class MyView extends View {
initialize (params) {
/** Set is valid to false **/
this.isValid = false;
this.model.set("Hello", "World");
}
}
export default MyView;
Pass in a string to set the className attribute before initialization example
import { className } from "marionette-decorators";
import { View } from "marionette";
@className("my-view")
class MyView extends View { }
export default MyView;
Set the controller for marionette the route example
import { controller } from "marionette-decorators";
import { AppRouter } from "marionette";
import MyRouteController from "./controller";
@controller(new MyRouteController)
class MyRoute extends AppRouter { }
export default MyRoute;
Pass in a string to set the tagName attribute before initialization example
import { tagName } from "marionette-decorators";
import { View } from "marionette";
@tagName("ul")
class MyView extends View { }
export default MyView;
Add an event listener into your marionette view example
import { tagName, on } from "marionette-decorators";
import { View } from "marionette";
@tagName("li")
class MyView extends View {
@on("click li")
onListItemClick (event) {
console.log(event);
}
}
export default MyView;
Set your UI object in the view example
import { className, on, ui } from "marionette-decorators";
import { View } from "marionette";
@ui({
listItem: "li"
})
class MyView extends View {
@on("click @ui.listItem")
onListItemClick (event) {
console.log(event);
}
}
export default MyView;