Question

有没有人能够用任何javascript框架实现MVP模型？我无法弄清楚如何让演示者 - ＆gt;查看从服务器代码到javascript的反转。我有一些想法，但有点hackish，并希望看到其他人在做什么。

Answer 1

MVP的主要目标是解密代码中的不同方面。通常，在JavaScript中，有三个主要的方面：

事件处理
DOM操作
服务器通信（AJAX调用）

对于这些问题中的每一个，都有来自MVP的相应术语：

EventHandling = Presenter
DOM操作=查看
AJAX调用=模型

因为实现这三个方面确实并不总是那么简单，所以EVENT BUS可能会派上用场。这个总线应该是一个单独的，所有在各种情况下提出的事件都应该在公交车上公布。演示者需要注册其事件并在事件发生时做出相应的反应。

以下是它的工作方式：

首先发生的是页面加载。使用普通事件模型或jQuery或任何方便的方式来听这个。创建模型，视图和演示者。 Presenter需要保存View和Model实例，因为他将使用它们。

var model = new Model();
var view = new View();
var presenter = new Presenter(model, view);

请记住，Presenter是事件处理程序，因此总线应该知道它并将事件路由到它以便处理：

bus.registerHandler(presenter);

第一个事件是“init”，这意味着页面已加载并且MVP对象都已设置：

bus.init(); // call this yourself

这会在Presenter中触发某些内容，就像函数一样。我更喜欢on ...命名约定，在本例中是presenter.onInit（）。这提供了安装UI侦听器的机会：

// in the Presenter
onInit: function() {
  view.addSubmitListener();
  view.addWhateverListener();
  ...
}

// in the View (using jQuery)
addSubmitListener: function() {
  $("#submitButton").click(function() {
    var formData = ...
    bus.submit(formData); // publish an event to the bus
  });
}

当单击Submit按钮时，将调用bus.submit（formData）并将其路由到处理程序--presenter.onSubmit（formData）：

// in the Presenter
onSubmit: function(formData) {
  model.postForm(formData, function(data) {
    // handle the response
    view.updateSomething(data);
  });
}

等等......整个技巧是将总线绑定到演示者，然后你就在循环中。

HTH

Answer 2

查看knockout.js这是您网页的MVVM框架。它提供了一个非常漂亮且易于扩展的框架，用于以松散耦合的方式链接模型和视图。

Answer 3

查看http://angularjs.org/处的角度项目，随时在邮件组询问任何问题。

它旨在与jQuery一起使用。对于编写TESTABLE MVC JS应用程序非常有用。

Answer 4

我知道这个问题已经过时了，但我认为这里值得一提。我的投票是Backbone.js。即使是文档说它是MVC，我会说它是MVP。

VIEW = html模板（jQuery.template）
MODEL = Backbone.Model
PRESENTER = Backbone.View（你的view-tempate和如何将数据绑定到它之间的层，以及你可以做的更多）和你可以在渲染方法耦合视图（html模板）或切换到哪个最好使用...

什么是最好的你还有控制器

CONTROLLER = Backbone.Controller

替代方案可能是@JoshRivers提到的，knockoutJS但我的个人意见是视图模板被绑定的东西所淹没。

最后一点。事情是从MVC或MVP看到的V是可以从您的模板构建而无需编码的东西，制作好的HTML模板解析器，你很高兴:)相信我，惯例是你的朋友。

Answer 5

检查PureMVC。它们也可以移植到JavaScript。

Answer 6

另一个，对于jQuery人：http://javascriptmvc.com/

请注意，Ext JS也支持自4.0版以来的MV（x）模式，我将其作为前Ext人员提及。像大多数框架一样，他们也称之为“MVC”（与JS世界中的大多数人一样，请参阅TodoMVC，而不是TodoMVP）。但是从实际的角度来看，Ext中的工具可以实现模式的C / P部分，以满足您的需求。模式很有用，但与大多数模式一样，在教条处理时会限制你的思维。

Answer 7

似乎googles GWT使用MVP：

Google GWT

Answer 8

我们在这里谈论MVP！不是MVC！我认为该行业还没有为MVP做好准备。每个人都在努力掌握MVC。

Answer 9

查看Riot.js - 一个全新的，独立的1kB（！）MVP微库，它拥有构建可扩展的模块化JavaScript应用程序所需的一切。还有一个全面的演示。

Answer 10

正在搜索MVP框架的一些示例并碰到这个链接，这可能对决定要使用的框架非常有用： MV* Frameworks

使用Javascript框架的MVP模式？

10 个答案: