Rendern von drei Arten von Ereignissen als HTML-Elemente

  • Ich muss etwas Javascript bereinigen und versuche, einen eleganteren Weg zu finden, diesen Code unten zu schreiben. Es durchläuft im Wesentlichen drei Wörterbücher mit der gleichen Schleifenstruktur und hängt benutzerdefiniertes HTML an eine bestimmte div an. Ich wollte herausfinden, ob es einen Weg gibt, diesen sich wiederholenden Code zu vermeiden:

     if (dtInt in calendarEventDict) {
        var arrEvents = calendarEventDict[dtInt];
        for (var a = 0; a < arrEvents.length; a++) {
            var calendarEvent = arrEvents[a];
            $("#dateCupcake" + i).append("<div  dateId='" + calendarEvent.Date + "' class='event " + "cal" + calendarEvent.CalendarId + " " + calendarEvent.CalendarClassName + "' calendarId='" + calendarEvent.CalendarId + "' eventDateId='" + calendarEvent.Id + "' id='" + calendarEvent.EventId + "'>" + calendarEvent.DisplayName + "</div>");
        }
    }
    if (dtInt in vacationEvents) {
        var arrEventsV = vacationEvents[dtInt];
        for (var v = 0; v < arrEventsV.length; v++) {
            var vacationEvent = arrEventsV[v];
            $("#dateCupcake" + i).append("<div  dateId='" + vacationEvent.Date + "' class='event " + "cal1 blueAllDay' calendarId='1' eventDateId='" + vacationEvent.Id + "' id='" + vacationEvent.EventId + "'><img src='/Content/Images/Icons/pawn_glass_" + vacationEvent.ApprovalIcon + ".png' />" + vacationEvent.PersonName + "</div>");
        }
    }
    if (dtInt in travelEvents) {
        var arrEventsV1 = travelEvents[dtInt];
        for (var v1 = 0; v1 < arrEventsV1.length; v1++) {
            var travelEvent = arrEventsV1[v1];
            $("#dateCupcake" + i).append("<div  calendarId='2' dateId='" + travelEvent.Date.ToString("MMM dd, yyyy") + "' class='event " + "cal2" + " blueAllDay' calendarId='2' eventDateId='" + travelEvent.Id + "' eventId='" + travelEvent.TravelRequest.Id + "'><img src='/Content/Images/Icons/user1_earth16.png' />" + travelEvent.TravelRequest.Person.LastName + ", " + travelEvent.TravelRequest.Person.FirstName.Substring(0, 1) + " visiting " + travelEvent.TravelRequest.TechnicalCentre.Name + "</div> ");
        }
    }
     
    08 March 2017
    200_successAsik
2 answers
  • Der einfachste Refaktor besteht darin, einfach die allgemeine Funktionalität herauszuholen und das Array für jeden Fall zu übergeben sowie eine Funktion zum Erstellen Ihres Div-Inhalts aus dem aktuellen Element in der Schleife. Angenommen, dtInt ist global:

     function checkDtInt(arr, funcToCreateDiv) {    
        if (dtInt in arr) {
            var arrEventsV1 = arr[dtInt];
            for (var v1 = 0; v1 < arrEventsV1.length; v1++) {
                var travelEvent = arrEventsV1[v1];
                $("#dateCupcake" + i).append(funcToCreateDiv(travelEvent));
            }
        }
     }
    
    checkDtInt(calendarEventDict, function(item) { 
       return "<div  dateId='" + item.Date + "' class='event " + "cal" + item.CalendarId + " " + item.CalendarClassName + "' calendarId='" + item.CalendarId + "' eventDateId='" + item.Id + "' id='" + item.EventId + "'>" + item.DisplayName + "</div>"
    });
    
    checkDtInt(vacationEvents, function(item) { 
       return "<div  dateId='" + item.Date + "' class='event " + "cal1 blueAllDay' calendarId='1' eventDateId='" + item.Id + "' id='" + item.EventId + "'><img src='/Content/Images/Icons/pawn_glass_" + item.ApprovalIcon + ".png' />" + item.PersonName + "</div>"
    });
    
    checkDtInt(travelEvents, function(item) { 
       return "<div  calendarId='2' dateId='" + item.Date.ToString("MMM dd, yyyy") + "' class='event " + "cal2" + " blueAllDay' calendarId='2' eventDateId='" + item.Id + "' eventId='" + item.TravelRequest.Id + "'><img src='/Content/Images/Icons/user1_earth16.png' />" + item.TravelRequest.Person.LastName + ", " + item.TravelRequest.Person.FirstName.Substring(0, 1) + " visiting " + item.TravelRequest.TechnicalCentre.Name + "</div> "
    });
     
    12 December 2011
    Vagnerr
  • Dies ist weniger Code, aber ich würde es nicht einfacher sagen: EDIT: Es ist nicht mehr weniger Code. Weniger wiederholter Code.

     var groups =[
        {
            events: calenderEventDict,
    
            calendaridfn: function(){ return this.calendarId;},
            contentsfn: function(){ return this.DisplayName; },
            datefn: function(){ return this.Date;}
        },
        {
            events: vacationEvents,
    
            calendaridfn: function(){ return "1";},
            contentsfn: function(){
                var contents = jQuery("<img/>")
                    .prop("src", "/Content/Images/Icons/pawn_glass_" +  this.ApprovalIcon + ".png")
                    .after(this.PersonName);
                return contents;
            },
            datefn: function(){ return this.Date;}
        },
        {
            events: travelEvents,
    
            calendaridfn: function(){ return "2";},
            contentsfn: function(){ 
                var contents= jQuery("<img />")
                    .prop("src", '/Content/Images/Icons/user1_earth16.png')
                    .after(
                        this.TravelRequest.Person.LastName + ", " +
                        this.TravelRequest.Person.FirstName.Substring(0, 1) + 
                        " visiting " +
                        this.TravelRequest.TechnicalCentre.Name
                    );
                 return contents;
            },
            datefn: function(){ return this.Date.ToString("MMM dd, yyyy"); }
        }
    ];
    
    jQuery.each(groups, function(){
        if (dtInt in this.events) 
        {
            var group = this;
            jQuery.each(events, function(){
                var calendarId = group.calendaridfn.call(this);
                $("#dateCupcake" + i).append(
                    jQuery("<div/>").prop({
                        dateId: group.datefn.call(this),
                        class: ["event",
                                "cal" + calendarId,
                                (this.CalendarClassName || "blueAllDay")].join(" "),
                        calendarId: calendarId,
                        eventDateId: this.Id, 
                        id: this.EventId 
                    })
                    .append(group.contentsfn.call(this))
                );
            }
        }
    });
     

    EDIT: - Also nach einer Diskussion mit Raynos Ich bin zu dem Verständnis gekommen, dass es besser ist, keine große HTML-Zeichenfolge über der Objekterstellungsmethode zu haben. Ich habe meine Antwort bearbeitet, um diese Idee zu reflektieren.

    12 December 2011
    James Khoury