How to init trait values from html template

[krishnaeverestengineering]

We are loading html template with custom components in it. How to init trait values from the that ?

[iabhiyaan]

editor.on('component:selected', component => {
 component.set({
  traits: ['name', 'placeholder']
 })

[krishnaeverestengineering]

I mean to say, for example we have font awesome icons and we are changing icons from the traits. So the class name would be changed. So when next time editor loads the same template based on font-awesome class we should set the trait value say twitter/linkedin value.

Currently we are doing something this sort.

     init: ->
        this.listenTo(this, 'change:href', @onSocialUrlChange.bind(this))
        this.listenTo(this, 'change:socialElement', @onSocialIconChange.bind(this))

        @initSettings()
        @updateTraitValues()

      updateTraitValues: ->
        @_initSocialIcon()

      _initSocialIcon: ->
        icons = @attributes.icons
        classes = @getClasses()
        icon = ''
        for cls in classes
          icon = Object.keys(icons).find((key) -> icons[key] == cls)
          break if icon

        this.set('socialElement', icon || 'twitter')

      initSettings: ->
        icons = @attributes.icons
        @updateTrait('socialElement', {
          options: [
            { id: 'twitter', name: 'Twitter', value: 'twitter' },
            { id: 'linkedin', name: 'Linkedin', value: 'linkedin'},
            { id: 'web', name: 'Web', value: 'web' }
          ]
        })

      onSocialIconChange: (model, value) ->
        newClassSet = ['social_element', 'fa']
        model.setClass(newClassSet.concat(@attributes.icons[value]))

[artf]

In your case, you have to update socialElement prop (which should update the connected trait accordingly) on init based on your classes