0

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

在扩展内部，可以通过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 模块的硬性限制吗？还是我错过了什么？

4

1 回答 1

0 
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;
});
于 2013-10-17T16:59:25.200 回答