从前台检索后台页面的 AMD 模块

Retrieving background page's AMD module from foreground

本文关键字：AMD 模块 前台 检索 后台      更新时间：2023-09-26

我有一个扩展，它由前景页面和背景页面组成。背景是永久性的，包含一些模型。前景是短暂的，包含视图。因此，前景的视图通过从持久背景模型中读取来保持其状态。

在扩展程序内部，可以通过chrome.extension.getBackgroundPage（）与背景页面进行交互，该页面提供对背景窗口的引用。

我正在使用RequireJS来模块化我的javascript。因此，模型的声明如下所示：

//  Exposed globally so that Chrome Extension's foreground can access through chrome.extension.getBackgroundPage()
var VideoDisplayButton = null;
define(function () {
    'use strict';
    var videoDisplayButtonModel = Backbone.Model.extend({
        defaults: {
            enabled: false
        },
        toggleEnabled: function () {
            this.set('enabled', !this.get('enabled'));
        }
    });
    VideoDisplayButton = new videoDisplayButtonModel;
    return VideoDisplayButton;
});

及其观点对应物：

this.videoDisplayButtonView = new VideoDisplayButtonView({
    model: chrome.extension.getBackgroundPage().VideoDisplayButton
});

我被迫破坏我的AMD模块，以便前台能够成功引用后台页面上托管的模型实例。

理想情况下，我希望我的背景的模型声明是：

define(function () {
    'use strict';
    var VideoDisplayButton = Backbone.Model.extend({
        defaults: {
            enabled: false
        },
        toggleEnabled: function () {
            this.set('enabled', !this.get('enabled'));
        }
    });
    return VideoDisplayButton;
});

这是在Chrome扩展程序中使用AMD模块的硬性限制吗？还是我错过了什么？

You can pass you model VideoDisplayButton to view VideoDisplayButtonView.
In your background page/view, give the file reference in the define as follows:
define([
  'path-to-VideoDisplayButton-model-file'
],function(VideoDisplayButton){
  var new_model = new VideoDisplayButton();
  this.videoDisplayButtonView = new VideoDisplayButtonView({
    model: new_model
  });
});
Your model should be as follows:
define(function () {
    'use strict';
    var VideoDisplayButton = Backbone.Model.extend({
        defaults: {
            enabled: false
        },
        toggleEnabled: function () {
            this.set('enabled', !this.get('enabled'));
        },
        initialize: function(){
        }
    });
    return VideoDisplayButton;
});
相关文章：