Issue #413Opened October 12, 2017by FrikkieSnyman0 reactions

Use trait to modify component class

Question

Hi!

I'm trying to change the value of the classes with very little succes.

Here is my custom trait's onValueChange function:

onValueChange() {        
        var traitModel = this.model;
        var selectedComponent = this.target;
        var inputValue = traitModel.get('value');        
        this.target.set('content', this.model.get('value'));
        selectedComponent.set('attributes', {class: inputValue});
}

Which results in an HTML output of:

<input class="input txt-red" class="col-lg-6"/>

Obviously, this isn't legal HTML. It also produces weird results when adding or removing a class in the Classes input.

What is the correct way to go about this?

Answers (3)

FrikkieSnymanOctober 13, 20170 reactions

@artf Is this even possible?

FrikkieSnymanOctober 16, 20170 reactions

So I got this figured out, in a quite hacky way, but it works!

Just create a custom trait, and use the following for the onValueChange()

onValueChange() {
        var parentModel = this.target.collection.parent.sm;
        var component = this.target;
        const sm = parentModel.get('SelectorManager');
        var traitModel = this.model;
        var selectedComponent = this.target;
        var label = traitModel.get('value');
        var compCls = component.get('classes');
        compCls.forEach(element => {
          if (element.id == this.model._previousAttributes.value) {
            compCls.remove(element);
          }
        });
        if (label) {
          var classModel = sm.add({label});
          compCls.add(classModel);
          parentModel.trigger('targetClassAdded');
        }
      }
lock[bot]September 18, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.