Problema de referencia de objeto

Question

Siguiente problema:

Me gustaría construir un pequeño portapapeles con jQuery. He intentado varias veces almacenar un objeto en los datos de un objeto javascript con $ (objeto) .data ('id', objectToStore). Los objetos se pueden almacenar allí que funciona bien. El problema es que si trato de insertar los datos almacenados solo obtengo una referencia a ese objeto. Entonces, cuando estoy editando una copia, las otras también cambian. Necesito una forma de copiar el código html en una variable global y luego insertar el código individualmente desde el almacenado. Espero que entiendan mi problema! Gracias!

Aquí el código:

Objeto

 /**
  * Objectdefinition
  */
 Clipboard = {

    //PROPERTIES
        itemcount: 0,           
        maxItems:10,            

        //Templates
        tplClipboard:"<div id='GUI_clipboard'><a href='' title='clear&nbsp;clipboard' id='GUI_clipboardClose' class='gritter-close'></a><ul></ul></div>",
        tplItem:"<li><a href='' class='[[type]] clipboardItem' id='[[id]]'><span class='hidden'>[[text]]</span></a></li>",
        tplItemHover:"<div class='GUI_clipboard_itemhover' style='width:[[offsetW]]px;height:[[offsetH]]px'><a href='' title='delete&nbsp;container' class='GUI_containerDelete'><span class='hidden'>Delete</span></a></div>",

        //Clipboarditem
        item:{
            id:null,
            type:null,
            content:'',
            offsetWidth:0,
            offsetHeight:0
        },

    //FUNCTIONS
        addItem:function(id,type,text,content,offsetH,offsetW){
            if(this.itemcount>=this.maxItems){
                return $.gritter.add({
                    title:'Clipboard',
                    text:'You cannot store more than '+ this.maxItems +' Elements!',
                    image:'warning',
                });
            }


            var item = {};
                item.id=id,
                item.type=type,
                item.content=content,
                item.offsetHeight=offsetH,
                item.offsetWidth= offsetW;


            this.verify();


            if (!this.checkRed(id)) {


                this.itemcount++;


                var tmp = this.tplItem;


                tmp = this.str_replace(['[[type]]', '[[id]]', '[[text]]'], [type, id, text], tmp);

                $('#GUI_clipboard ul').append(tmp);
                var $item = $('a#'+id);
                var number = this.itemcount;
                $item.hide().fadeIn('slow',function(){

                    Clipboard.redraw();
                });


                this.saveItem(item);


                var config = {
                    over:function(){Clipboard.hoveringItem($('a',this))},
                    out:function(){Clipboard.unhoveringItem($('a',this))},
                    timeout:1
                };
                $item.parent().hoverIntent(config);


                $item.draggable({
                    connectToSortable:'.column',                        
                    helper:'clone',                                     
                    revert:'invalid',                                   
                    cursor:'move',                                      //Cursor
                    start:function(){
                        $('body').unbind('mouseover',Content.showContainerMenu);
                        $('body').unbind('mouseout',Content.hideContainerMenu);
                        $('#GUI_clipboard li').trigger('mouseout');
                    },
                    stop:function(){
                        $('body').bind('mouseover',Content.showContainerMenu);
                        $('body').bind('mouseout',Content.hideContainerMenu);
                    }
                });
            }else{

                $('#'+id,'#GUI_clipboard').effect("bounce", { times:3 }, 300);
            }
        },


        saveItem:function(item){            
            $(this).data(item.id,item);
        },


        removeItem: function(id){
            $('#GUI_clipbaord').data(id,null);
            $('a[id='+id+']','#GUI_clipboard').parent().slideUp('slow',function(){$(this).remove()});
            this.itemcount--;

            if(this.itemcount==0)this.remove();
        },


        verify:function(){
            if($('#GUI_clipboard').length == 0){
                $('body').append(this.tplClipboard);                     

                $('#GUI_clipboard')                         
                    .css({
                        top:$(window).height()/2+'px'                       
                    })
                    .animate({                                          
                        left:0
                    }).children('.gritter-close').capture({cssClass:'GUI_clipboardClose'});     
            }
        },


        checkRed:function(id){
            if($('a[id='+id+']').length==0)return false;
            else return true;
        },


        remove:function(){
            $('#GUI_clipboard').animate({                                               
                left:'-60px'
            },function(){
                $(this).remove();
            });
            this.itemcount=0;
        },


        hoveringItem:function(el){

            var item = $(this).data($(el).attr('id')),
                content=item.content,
                oH=item.offsetHeight,
                oW=item.offsetWidth,


            tmp = this.tplItemHover;                
            tmp = this.str_replace(['[[offsetW]]', '[[offsetH]]'], [oW,oH], tmp);


            $(el).after(tmp);
            var $element = $('.GUI_clipboard_itemhover').append(content).prepend("<div class='GUI_clipboardArrow'></div>");


            $element.position({ my: 'left center', at: 'right center', of: $(el),offset:'14 0',collision:'none fit'});
            $('.GUI_clipboardArrow',$element).position({ my: 'left center', at: 'right center', of: $(el),offset:'-2 0',collision:'none fit'});


            $('#'+item.id,'#GUI_clipboard').removeClass('borderContainer editable');


            $('a.GUI_containerDelete',$element).click(function(){
                Clipboard.removeItem($element.children('.container').attr('id'));
                $element.fadeOut().remove();
            }).capture({cssClass:'GUI_clipboardItemClose'});

        },


        unhoveringItem:function(el){
            //Preview entfernen
            $(el).next().remove();
        },


        redraw:function(){
            if(this.itemcount>1){
                $('#GUI_clipboard').animate({
                     top: '-=20px'                      
                });
            }
        },


        str_replace: function(search, replace, subject, count) {

            var i = 0, j = 0, temp = '', repl = '', sl = 0, fl = 0,
                f = [].concat(search),
                r = [].concat(replace),
                s = subject,
                ra = r instanceof Array, sa = s instanceof Array;
            s = [].concat(s);
            if (count) {
                this.window[count] = 0;
                }

            for (i=0, sl=s.length; i < sl; i++) {
                if (s[i] === '') {
                    continue;
                }
                for (j=0, fl=f.length; j < fl; j++) {
                    temp = s[i]+'';
                    repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0];
                    s[i] = (temp).split(f[j]).join(repl);
                    if (count && s[i] !== temp) {
                        this.window[count] += (temp.length-s[i].length)/f[j].length;}
                }
            }
            return sa ? s : s[0];

        }
 }

¡Ese era el objeto! Como ve cuando paso el mouse sobre un elemento, el Objeto lo obtiene del almacén interno. Pero cuando estoy insertando el objeto con seguimiento en el área de contenido

var item = $(Clipboard).data($(ui.sender).attr('id')),
                        newItem = $.extend(true, {}, item);
                        content=newItem.content;

y luego desplace el portapapeles para arrastrarlo e insertarlo de nuevo, el objeto (código html) del contenido actual desaparece y se inserta en la vista previa del portapapeles.

¡Alguna idea!

¡Por favor!

Answer 1

¡Tengo la solución por mi cuenta! Gracias al impresionante tutorial de JavaScript de Leigh Kaszick: "Los fundamentos de JavaScript orientado a objetos". Compruébelo: http: // net .tutsplus.com / tutorials / javascript-ajax / the-basics-of-object-orientedo-orientado /

Los objetos literales siempre son referenciados mientras que los funcionales no lo son;) Ese es el truco.

Objeto literal:

var Storage = {
    id:'one',
    content:'blah'
};

Objeto funcional:

function Storage(id,content) = {
         this.id=id;
         this.content:content;
}
var myStorage = new Storage('one','blah');

Para resolver mi problema, creé una nueva instancia del objeto de almacenamiento cada vez que paso datos al portapapeles. ¡Y funciona! ;)