Rendering different view classes based on the value of a string Here I'm instantiating different classes based on the value of a type property. This type property will determine what view is rendered and displayed on screen to the user.

As you can see there's a lot of repetition here. The main problem I'd like to eliminate is all those else ifs. 

onShow: function() {
    var type = this.model.get('type').toLowerCase();

    if (type === 'face') {
        this.regionItems.show(new FaceDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));
    } else if (type === 'voice') {
        this.regionItems.show(new VoiceDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));
    } else if (type === 'text-prompted') {
        this.regionItems.show(new VoiceDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));

    } else if (type === 'face-password (text)') {
        this.regionItems.show(new PinDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));

    } else if (type === 'pin') {
        this.regionItems.show(new PinDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));
    }  else if (type === 'live voice') {
        this.regionItems.show(new VoiceLiveness({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));
    } else if (type === 'voice-face (image)') {
        this.regionItems.show(new FaceDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));
    } else if (type === 'voice-face (audio)') {
        this.regionItems.show(new VoiceDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));
    } else if (type === 'gps') {
        this.regionItems.show(new GPSDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));

    } else if (type === 'face-password (image)') {
        this.regionItems.show(new FaceDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));
    } else if (type === 'voice-face (challenge audio)') {
        this.regionItems.show(new VoiceLiveness({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));
    } else if (type === 'fingerprint') {
        this.regionItems.show(new FingerDetail({
            model               : this.model,
            authRequestModel    : this.authRequestModel,
            collection          : this.model.attemptItemsDataCollection
        }));
    }
}


I intend to extract

{
    model               : this.model,
    authRequestModel    : this.authRequestModel,
    collection          : this.model.attemptItemsDataCollection
}


to the top of the method as an options variable and then pass it to the constructor when I instantiate each view (FaceDetail, VoiceDetail, etc.)

After this I'm still left with all those else ifs.
The obvious answer is to introduce a map:

var typeToConstructor = {
    'face' : FaceDetail,
    'voice' : VoiceDetail,
    // ...
}


Then you can simply look up your constructor function:

onShow: function() {
    var type = this.model.get('type').toLowerCase();
    var constructor = typeToConstructor[type];
    if (typeof constructor !== 'function') {
        // Unknown type... do something
    }

    // execute the constructor.
    this.regionItems.show(new constructor({
        model               : this.model,
        authRequestModel    : this.authRequestModel,
        collection          : this.model.attemptItemsDataCollection
    });
}