wordpress 3.5 media manager - add my own backbone.js views

Question

I am currently trying to utilize the new WordPress 3.5 media manager which uses backbone.js to create and populate its modal window.

What I want to do is: a user clicks upload button, media manager pops up, user selects image, presses insert, image is then saved to custom field.

All of that already works, the only thing that I would like to change is to populate the sidebar of the media uploader (were user can add caption, title, select size, etc) with my very own template.

I already read dozens of tutorials on how to work with backbone but am now a little stuck. here is my some of code so far:

//defined earlier:
var frame;

//on click:

if ( file_frame )
{
    file_frame.open();
    return;
}
else
{
    // Create the media frame.
    file_frame  = wp.media(
    {
    frame:   'select',
    state:   'mystate',
    library:   {type: 'image'},
    multiple:   false
    });

    file_frame.states.add([

    new media.controller.Library({
        id:         'mystate',
        title: 'my title',
        priority:   20,
        toolbar:    'select',
        filterable: 'uploaded',
        library:    media.query( file_frame.options.library ),
        multiple:   file_frame.options.multiple ? 'reset' : false,
        editable:   true,
        displayUserSettings: false,
        displaySettings: true,
        allowLocalEdits: true,
          //AttachmentView: ?

    }),
    ]);

file_frame.open();

}

I have also tried registering my own template like this:

media.view.Attachment.mySidebar = media.view.Settings.AttachmentDisplay.extend(
{
    className: 'attachment-display-settings',
    template:  media.template('avia-choose-size')
});

but the problem is: I dont know were to load only this template instead of the original sidebar. passing it as AttachmentView parameter obviously doesnt work since it replaces the whole template and not just the sidebar.

Anyone with some backbone.js experience who can help?

Answer 1

I'm not sure if you ever found an answer to your question, but I wanted to let you know that I got the above code to work for me by simply fixing references to "media" objects that were not prefixed with "wp." So...your new custom state code should look like this instead:

file_frame.states.add([

new wp.media.controller.Library({
    id:         'mystate',
    title: 'my title',
    priority:   20,
    toolbar:    'select',
    filterable: 'uploaded',
    library:    wp.media.query( file_frame.options.library ),
    multiple:   file_frame.options.multiple ? 'reset' : false,
    editable:   true,
    displayUserSettings: false,
    displaySettings: true,
    allowLocalEdits: true,
      //AttachmentView: ?

}),
]);

I personally wanted to REPLACE the initial default state of the 'select' frame, which I achieved by adding states : 'mystate' to the file_frame options, causing the initialization to return without creating the default 'select' state. And then proceeded with creating 'mystate' as you demonstrated (with the two minor changes in object syntax).

My thanks go to you for the lead in methodology here! It worked perfectly, and I was completely lost and frustrated prior.