diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md index 2eb8f02d9..259dbf9e5 100644 --- a/docs/modules/Traits.md +++ b/docs/modules/Traits.md @@ -196,10 +196,29 @@ If you need to change some trait on your component you can update it wherever yo The trait is a simple property of the component so to get the complete list of current traits you can use this: ```js -const traits = editor.getSelected().get('traits'); +const component = editor.getSelected(); // Component selected in canvas +const traits = component.get('traits'); traits.forEach(trait => console.log(trait.props())) ``` +In case you need a single one: + +```js +const component = editor.getSelected(); +console.log(component.getTrait('type').props()); // Finds by the `name` of the trait +``` + +If you want, for example, updating some property of the trait, do this: + +```js +// Let's update `options` of our `type` trait, defined in Input component +const component = editor.getSelected(); +component.getTrait('type').set('options', [ + { id: 'opt1', name: 'New option 1'}, + { id: 'opt2', name: 'New option 2'}, +]) +``` + ## Define new Trait type diff --git a/src/trait_manager/view/TraitSelectView.js b/src/trait_manager/view/TraitSelectView.js index 9032e33ac..60f9300a3 100644 --- a/src/trait_manager/view/TraitSelectView.js +++ b/src/trait_manager/view/TraitSelectView.js @@ -6,7 +6,7 @@ const $ = Backbone.$; export default TraitView.extend({ init() { - this.listenTo(this.model, 'change:options', this.render); + this.listenTo(this.model, 'change:options', this.rerender); }, templateInput() { diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index 1ea931794..f1f215ea5 100644 --- a/src/trait_manager/view/TraitView.js +++ b/src/trait_manager/view/TraitView.js @@ -215,6 +215,11 @@ export default Backbone.View.extend({ return !this.model.get('noLabel'); }, + rerender() { + this.model.el = null; + this.render(); + }, + render() { const { $el, pfx, ppfx, model, target } = this; const { type } = model.attributes;