Question

中的代码

我有一个简单的概念证明代码，我有两个相同的控制器，一个模型和模型监听器。控制器由两个不同的按钮单独启动：

需要（[ '的jquery'， 'Controller1'，'Controller2']，函数（$，controller1，controller2） { $（document）.ready（function（）{

    controller1.init();
    controller2.init();

    $('#controller1Click').on('click', function()
    {
        $('#results').val('Controller 1 Click');
        controller1.start();
    });

    $('#controller2Click').on('click', function()
    {
        $('#results').val('Controller 2 Click');
        controller2.start();
    });

});

}）;

当调用控制器start（）方法时，它调用模型retrieveData（）方法，然后执行notifyLoadBegin（）方法。我遇到的问题是，如果单击任一按钮，控制器1和控制器2都会调用loadBegin（）方法。在每个控制器中，我在每个控制器中创建一个新的模型实例和监听器，因此我假设控制器只会启动该控制器中模型/监听器的实例。

这是控制器。两个控制器完全相同，只是它显示了loadBegin（）方法中哪个控制器的消息。

define('Controller1',
[
'jquery',
'ConfigModel', 'ConfigModelListener'    
], 
function (
    $,
    ConfigModel, ConfigModelListener
) 
{
    var self = {};

    var configModel             = new ConfigModel();
    var configModelListener     = new ConfigModelListener();


    self.init = function()
    {

        var modelListener1 = configModelListener.create({
            loadBegin: function()
            {
               // Controller 1 code
                var buff = $('#results').val();
                $('#results').val(buff + '\r\n' + 'Controller1 loadBegin');
                console.log('Controller1 loadBegin');

               // Controller 2 code (added here so I dont have to duplicate the code
                var buff = $('#results').val();
                $('#results').val(buff + '\r\n' + 'Controller2 loadBegin');
                console.log('Controller2 loadBegin');

            }
        });

        configModel.addListeners(modelListener1);
    }

    self.start = function()
    {
        configModel.retrieveData();
    }

    return self;

});

以下是模型和模型侦听器代码：

define('ConfigModel', ['jquery'], 
function ($) 
{
    var self = {}; 

    var listeners = [];

    self.retrieveData = function()
    {
        self.notifiyLoadBegin();

    }


    /* Listeners */
    self.addListeners = function(list)
    {
        listeners.push(list);
    }

    self.notifiyLoadBegin = function()
    {
        $.each(listeners, function(i)
        {
            listeners[i].loadBegin();
        });
    }

    return function(){
        return self;
    };


});


define('ConfigModelListener', ['jquery'], 
function ($) 
{
    var self = {}; 

    self.create = function(list)
    {
        if(!list)
            list = {};

        return $.extend({
            loadBegin               : function(){}

        }, list);
    }

    return function(){
        return self;
    };  

});

我假设我正在实例化模型而模型监听器不正确地如何实现。只是不确定。

Answer 1

好的，我明白了。我把答案放在JSFiddle 万一有人感兴趣或遇到同样的问题。我所做的是将我的模型和模型侦听器转换为函数返回：

define('ConfigModel', ['jquery'], 
function ($) 
{
    function configModel()
    {
        var self = this;
        var listeners = [];

        self.retrieveData = function()
        {
            self.notifiyLoadBegin();
        }
        self.addListeners = function(list)
        {
            listeners.push(list);
        }
        self.notifiyLoadBegin = function()
        {
            $.each(listeners, function(i)
            {
                listeners[i].loadBegin();
            });
        }
    }
    return configModel;
});


define('ConfigModelListener', ['jquery'], 
function ($) 
{
    function configModeListener()
    {
        var self = this;

        self.create = function(list)
        {
            if(!list)
                list = {};

            return $.extend({
                loadBegin : function(){}
            }, list);
        }
    }
    return configModeListener;
});

Answer 2

我只想在JSFiddle

中添加另一个示例

这个更符合我的原始样本，所以我想添加以供参考。

模特：

function configModel()
{
    var self = {}; 
    var listeners = [];

    self.retrieveData = function()
    {
        self.notifiyLoadBegin();
    }
    // Listeners 
    self.addListeners = function(list)
    {
        listeners.push(list);
    }
    self.notifiyLoadBegin = function()
    {
        $.each(listeners, function(i)
        {
            listeners[i].loadBegin();
        });
    }
    return self;
}
return configModel;

模型监听器：

function configModelListener()
{
    var self = {}; 

    self.create = function(list)
    {
        if(!list)
            list = {};
        return $.extend({
            loadBegin               : function(){}

        }, list);
    }       
    return self;
}

return configModelListener;

概念模型控制器调用正确实例的证明

2 个答案: