谈谈关于JavaScript 中的 MVC 模式(2)

for (index = 0; index < this._listeners.length; index += 1) {
            this._listeners[index](this._sender, args);
        }
    }
};

View 类需要定义控制器类，以便与它交互。 虽然这个任务可以有许多不同的接口（interface），但我更喜欢最简单的。 我希望我的项目是在一个 ListBox 控件和它下面的两个按钮：“加号”按钮添加项目，“减”删除所选项目。 组件所提供的“选择”功能则需要 select 控件的原生功能的支持。

一个 View 类被绑定在一个 Controller 类上， 其中「…控制器处理用户输入事件，通常是通过一个已注册的回调函数」（wikipedia.org）。

下面是 View 和 Controller 类：

复制代码 代码如下:

/**
 * 视图。
 *
 * 视图显示模型数据，并触发 UI 事件。
 * 控制器用来处理这些用户交互事件
 */
function ListView(model, elements) {
    this._model = model;
    this._elements = elements;

this.listModified = new Event(this);
    this.addButtonClicked = new Event(this);
    this.delButtonClicked = new Event(this);

var _this = this;

// 绑定模型监听器
    this._model.itemAdded.attach(function () {
        _this.rebuildList();
    });

this._model.itemRemoved.attach(function () {
        _this.rebuildList();
    });

// 将监听器绑定到 HTML 控件上
    this._elements.list.change(function (e) {
        _this.listModified.notify({ index : e.target.selectedIndex });
    });

this._elements.addButton.click(function () {
        _this.addButtonClicked.notify();
    });

this._elements.delButton.click(function () {
        _this.delButtonClicked.notify();
    });
}

ListView.prototype = {
    show : function () {
        this.rebuildList();
    },

rebuildList : function () {
        var list, items, key;

list = this._elements.list;
        list.html('');

items = this._model.getItems();
        for (key in items) {
            if (items.hasOwnProperty(key)) {
                list.append($('<option>' + items[key] + '</option>'));
            }
        }

this._model.setSelectedIndex(-1);
    }
};

/**
 * 控制器。
 *
 * 控制器响应用户操作，调用模型上的变化函数。
 */
function ListController(model, view) {
    this._model = model;
    this._view = view;

var _this = this;

this._view.listModified.attach(function (sender, args) {
        _this.updateSelected(args.index);
    });

this._view.addButtonClicked.attach(function () {
        _this.addItem();
    });

this._view.delButtonClicked.attach(function () {
        _this.delItem();
    });
}

ListController.prototype = {
    addItem : function () {
        var item = window.prompt('Add item:', '');
        if (item) {
            this._model.addItem(item);
        }
    },

delItem : function () {
        var index;

index = this._model.getSelectedIndex();
        if (index !== -1) {
            this._model.removeItemAt(this._model.getSelectedIndex());
        }
    },

updateSelected : function (index) {
        this._model.setSelectedIndex(index);
    }
};

当然，Model, View, Controller 类应当被实例化。

下面是一个使用此 MVC 的完整代码：

复制代码 代码如下:

$(function () {
    var model = new ListModel(['PHP', 'JavaScript']),