Question

我的扩展程序包含前台页面和后台页面。背景是持久的，包含一些模型。前景是短暂的并包含视图。因此，前景的视图通过从持久性背景模型中读取来维持其状态。

在扩展程序内部，可以通过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模块的一个严格限制吗？或者我错过了什么？

Answer 1

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;
});

从前台检索背景页面的AMD模块

1 个答案: