미디어 모달 박스에 필터 기능 추가

미디어 모달을 확장하려고하는데 관련 문서 / 자습서를 찾을 수 없습니다. 나도 백본의 주인이 아니야 ;-)

첨부 파일 게시물 유형에 첨부 된 각 분류 체계에 대해 선택 상자를 추가하고 싶습니다. 현재 하나의 선택 상자 만 표시됩니다.

이것이 제가 생각 해낸 것입니다. 기본 툴바를 대체한다는 점을 제외하고는 훌륭하게 작동합니다.

암호

/**
 * Extended Filters dropdown with taxonomy term selection values
 */
jQuery.each(mediaTaxonomies,function(key,label){

    media.view.AttachmentFilters[key] = media.view.AttachmentFilters.extend({
        className: key,

        createFilters: function() {
            var filters = {};

            _.each( mediaTerms[key] || {}, function( term ) {

                var query = {};

                query[key] = {
                    taxonomy: key,
                    term_id: parseInt( term.id, 10 ),
                    term_slug: term.slug
                };

                filters[ term.slug ] = {
                    text: term.label,
                    props: query
                };
            });

            this.filters = filters;
        }

    });

    /**
     * Replace the media-toolbar with our own
     */
    media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
        createToolbar: function() {

            media.model.Query.defaultArgs.filterSource = 'filter-media-taxonomies';

            this.toolbar = new media.view.Toolbar({
                controller: this.controller
            });

            this.views.add( this.toolbar );

            this.toolbar.set( 'terms', new media.view.AttachmentFilters[key]({
                controller: this.controller,
                model:      this.collection.props,
                priority:   -80
            }).render() );
        }
    });

});

기발한

내 결과

내가 원하는 것

전체 코드

https://github.com/Horttcore/Media-Taxonomies

Backbone.js와 WP의 멋진 세계 (아무 것도 아는 바가 없습니다).

문제는 당신이 같은 기본값을 호출하고 media.view있다고 생각합니다. 대신 새로운 것을 초기화해야한다고 생각합니다.

예를 들면 다음과 같습니다.

/**
 * Replace the media-toolbar with our own
 */
    var myDrop = media.view.AttachmentsBrowser;

    media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
    createToolbar: function() {

        media.model.Query.defaultArgs.filterSource = 'filter-media-taxonomies';

        myDrop.prototype.createToolbar.apply(this,arguments);

        this.toolbar.set( key, new media.view.AttachmentFilters[key]({
            controller: this.controller,
            model:      this.collection.props,
            priority:   -80
        }).render() );
    }
});

아래와 같은 것을 줄 것입니다 (나는 철저한 오류 검사를하지 않았지만 작동합니다).

또한 이와 media.view.AttachmentFilters관련 하여이 작업을 수행하는 것도 고려해야 합니다 window.wp.media;.