Source: themes/ess-dive/views/metadata/EMLReferencePaperSubView.js

define(['underscore', 'jquery', 'backbone', 'models/metadata/eml211/EMLText',
        'text!themes/ess-dive/templates/metadata/referencePaper.html'],
    function (_, $, Backbone, EMLText, Template) {

        /***
         * SubView for managing Funding Organizations
         *
         * @type {void|*}
         */
        var EMLReferencePaperSubView = Backbone.View.extend({
            tagName: "div",

            attributes: {
                "data-category":"referencePaper"
            },

            events: {
                "change"   : "handleUpdate",
        		"click .remove" : "handleRemove",
        		"mouseover .remove" : "previewRemove",
        		"mouseout .remove"  : "previewRemove"
            },


        	className: "row-fluid eml-additional-info",

            template: _.template(Template),

            /**
             * Initialize the Sub View
             * @param options
             */
            initialize: function(options){


                this.papers =[];
                this.parentModel = options.parentModel;

                // Restrict Additional Information to a single element. Otherwise
                // we will not know where the reference papers are.
                this.additionalInfo = this.parentModel.get("additionalInfo");
                if(Array.isArray(this.additionalInfo) && this.additionalInfo.length !=0){
                    this.additionalInfo = this.additionalInfo[0]
                }
                if (!this.additionalInfo || this.additionalInfo.length == 0 || !this.additionalInfo.get("section")){
                    this.additionalInfo =  new EMLText({
                            text:[],
                            section: new EMLText({
                                type: "section",
                                title: "Related References",
                                text:[]
                            })
                        });
                }

                if (_.isArray(this.additionalInfo.get("section"))) {
                    var section = this.additionalInfo.get("section")[0];
                    this.papers = section.text;
                }
                else
                    this.papers = this.additionalInfo.get("section").text;

        	},

            /**
             * Render the template with the data
             *
             * @returns {EMLReferencePaperSubView}
             */
            render: function () {
                // Render the template with the selected funding organizations
                this.$el.html(this.template({
                        "referencePapers": this.papers
                    }
                ));

                // This is a Subview
                this.delegateEvents();

                return this;
            },

            /**
             * Update reference paper
             *
             * @param e
             * @returns {boolean}
             */
            handleUpdate: function(e){
                if(!e) return false;

                // Get the DOM position so we know which one to update
                var position = this.$(".reference-paper-item").index($(e.target));

                // Stop if, for some odd reason, the target isn't found
                if (position === -1) {
                    return;
                }

                // Create an EML Text
                this.papers[position] =$(e.target).val();

                //Add this model to the parent EML model when it is valid
                this.parentModel.set("additionalInfo", new EMLText({
                            text:[],
                            section: new EMLText({
                                type: "section",
                                title: "Related References",
                                text: this.papers
                            })
                        }));

				//Show the remove button
				$(e.target).parents(".reference-paper-container").find(".remove").show();

				this.render()

            },

            /***
             * Remove this reference paper
             *
             * @param e
             */
        	handleRemove: function(e){
        		//Get the index of this step
        		var stepEl = $(e.target).parent(".reference-paper-container").find(".reference-paper-item"),
        			index  = this.$(".reference-paper-item").index(stepEl),
        			view   = this;
        		
        		//Remove this step from the model
				this.papers = _.without(this.papers, this.papers[index]);

                //Add this model to the parent EML model when it is valid
                this.parentModel.set("additionalInfo", new EMLText({
                            text:[],
                            section: new EMLText({
                                type: "section",
                                title: "Related References",
                                text:this.papers
                            })
                        }));

        		this.render();

        	},
            previewRemove: function(e){
        		$(e.target).parents(".reference-paper-container").toggleClass("remove-preview");
        	}
        });

        return EMLReferencePaperSubView;

    }
);