Incorrect way of adding child views to a specific dom element in the parent's collection view in Chaplin.js. Reference: http://sohanjain.com/2014/01/chaplin-jss-container-containermethod-and-listselector-options/

player-song-view.js

define([
    'views/base/view',
    'jquery',
    'text!templates/player-song.hbs',
], function(View, $, template) {
    'use strict';

    var PlayerSongView = View.extend({
        autoRender: true,
        autoAttach: true,
        template: template,
        className: 'song-container',
        container: '.player-songs',

        ...

    });

    return PlayerSongView;
});

player-songs-view.js

define([
    'views/base/collection-view',
    'jquery',
    'text!templates/player-songs.hbs',
], function(CollectionView, $, template) {
    'use strict';

    var PlayerSongsView = CollectionView.extend({
        template: template,
        className: 'song-container',

        ...

    });

    return PlayerSongsView;
});

player-songs.hbs

<h1>Song Player</h1>
<div class="player-songs">
</div>
<div class="controls">
    <button class="btn skip-song">Skip Song</button>
</div>