如何为WordPress媒体库附件筛选的Backbone下拉框设置默认值

完全可以实现，核心逻辑是利用媒体库筛选组件和数据模型的双向绑定特性，在组件初始化时给对应筛选字段赋默认值即可，不需要改动Backbone底层逻辑。

实现思路 #

WordPress自带的AttachmentFilters组件会在渲染时自动读取绑定的collection.props模型里的字段值，自动匹配对应下拉选项。只要在筛选器首次渲染前，把你新增的year字段设置为当前年份，组件就不会默认选中filter.all对应的「所有年份」选项，同时会自动拉取对应年份的媒体资源。

可直接复用的代码 #

以下是修改后的完整代码，关键改动加了注释：

// 自定义年份筛选器
var MediaLibraryYearsFilter = wp.media.view.AttachmentFilters.extend({
    id: 'media-attachment-years-filter',

    createFilters: function() {
        var filters = {};
        const currentYear = new Date().getFullYear();

        filters.all = {
            text:  '所有年份', // 需要英文文案就改回 'All Years'
            props: {
                year: "",
            },
            priority: 10
        };
            
        // 生成2015年至当前年份的选项列表
        this.years = function(startYear) {
            var years = [];
            startYear = startYear || 1980;  
            while ( startYear <= currentYear ) {
                years.push(startYear++);
            }   
            return years;
        }
        years = this.years(2015).reverse();
        
        _.each( years || {}, function( value, index ) {
            filters[ index ] = {
                text: value,
                props: {
                    year: value
                },
                priority: 20
            };
        });
        this.filters = filters;
    },

    // 新增初始化逻辑，设置默认选中值
    initialize: function() {
        // 先执行原生筛选器的初始化方法
        wp.media.view.AttachmentFilters.prototype.initialize.apply(this, arguments);
        // 首次加载、year字段无值时，默认设置为当前年份
        if (!this.model.get('year')) {
            this.model.set('year', new Date().getFullYear());
        }
    }
});

// 把自定义筛选器加入媒体库工具栏
var AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({    
    createToolbar: function() {
        // 先加载原生工具栏内容
        AttachmentsBrowser.prototype.createToolbar.call( this );
        // 挂载自定义年份筛选器
        this.toolbar.set( 'MediaLibraryYearsFilter', new MediaLibraryYearsFilter({
            controller: this.controller,
            model:      this.collection.props,
            priority: -80
        }).render() );
    },                  
}); 

关键注意点 #

• 不要在createFilters方法里直接修改模型值，这个方法只负责生成下拉选项配置，在这里赋值会导致下拉选中状态和实际查询参数不同步
• 代码需要在媒体库相关脚本加载完成后再执行，建议挂载到wp_enqueue_media动作之后，避免出现wp.media is undefined的报错
• 如果需要默认选中其他年份，只需要把new Date().getFullYear()替换成你需要的年份数值即可

内容的提问来源于stack exchange，提问作者ogdsgn