Attaching component to a node that is dynamically added.

[appren...@googlemail.com]

I have a Component where I'm using jquery to append an element to the document (inside body element). I'd like reuse one of the components that I have already created and attach it to the newly added element. Not sure how I can do this?

Example

Given the Foo component, I'd like to attach the component to the "foobar" element (see below) upon append.

define(function(require) {

  'use strict';

  var Foo = require('component/foo');

  ...

  function initialize() {

    ...

    Foo.attachTo('body');

  }

  return initialize;

});

//Attach the Foo Component to the "foobar" element below.

 define(function(require) {

     var defineComponent = require('flight/lib/component');

     return defineComponent(data);

     function boo() {

        this.boo = function(){

           var elem = "div id="foobar"></div>"

            this.$node.append(elem);

            ....

         

        }

    this.after('initialize', function(){      

         .....

     });

   

     }

     });

[Gabriel Pugliese]

Is that a real code? If it is, correct the creation of the fragment:

var elem = $("<div>").attr('id', 'foobar');

Gabriel Pugliese
CodersTV.com
@coderstv

[Giuseppe Gurgone]

Refactor your component to use event delegation instead https://github.com/flightjs/flight/blob/master/doc/base_api.md#this.on (3rd example).

You can then attach the component to the closest parent - in your case boo's this.$node.