Issue #2092💬 AnsweredOpened June 22, 2019by paulwright750 reactions

Is it me or is this a bug

快速解答by artf

Hi @paulwright75 can you create a reproducible demo, please?

Read full answer below ↓

Question

Hi, so I am using version 0.14.62 and I have a problem with the TraitManager. I have defined two custom traits like so:

//Traits manager
// Each new type extends the default Trait
editor.TraitManager.addType('bindingSrc', {
  /*events: {
    'keyup': 'onChange', // trigger parent onChange method on keyup
  },*/
  onValueChange: function () {
    if(this.model.get('type')==="bindingSrc"){
      //reference the targe element as a model
      model = this.target;

      //get the new value from the traits object
      newValue = this.model.get('value');

      //set the new value to the group-bindings field.
      model.set('attributes', {'group-bindings': newValue});

      //update the input controls angular bindings
      model.find("input")[0].set('attributes', {"ng-model": newValue});
    }
  }
});

editor.TraitManager.addType('ctrlLabel', {
  /*events: {
    'keyup': 'onChange', // trigger parent onChange method on keyup
  },*/
  onValueChange: function () {
    if(this.model.get('type')==="ctrlLabel"){
      this.target.find('label')[0].set({content: this.model.get('value')});
    }
  }
});

And my component like so:
//Component: RadioButton
var radioButton = String.format('<div class="pretty p-default p-round radio-control" data-gjs-draggable=".control-group"><input type="radio" name="radio1" {0} disabled><div class="state" {0}><label {0}>Radio Control</label></div></div>', cBehaviors["component-inner-body"]);
domComps.addType('RadioControl', {
  tagName: "div",
  model: dModel.extend({
    // Extend default properties
    defaults: Object.assign({}, dModel.prototype.defaults, {
      selectable: "true",
      draggable: "ControlGroup",
      traits: [{type: 'bindingSrc', label: 'Bind to', name: "group-bindings"}, {type: 'ctrlLabel', label: "Label", name: "control-label"}]
    }),
  }, {
    isComponent: function (el) {
      if (el.tagName == 'DIV' && el.classList.contains("radio-control")) {
        return {
          type: "RadioControl"
        };
      }
    },
  }),
  view: dView,
});

The problem is that when I change the value for bindingSrc an event is fired for both bindingSrc and ctrlLabel. The end result is that the label is set to empty.

I am completely new to gitHub. Please forgive me if I am violating any rules here as I am sure you will let me know if I am.

Answers (2)

artfJuly 2, 2019

Hi @paulwright75 can you create a reproducible demo, please?

no-response[bot]July 12, 2019

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.