Question

我目前正在开发一种类似于Google阅读器的网络应用程序（至少在处理何种信息方面）。我使用普通的Javascript和jQuery构建了一个基本的原型，但我很快发现它变得非常混乱，非常快。

所以今天我一直在寻找适用于Javascript应用程序的MVC框架。这是我熟悉的开发架构，它非常适合我想要做的事情。我发现的一些替代方案是SprouteCore，Backbone.js和Knockout.js（不是MVC，但足够接近）。他们都有自己的优点和缺点，但我不确定哪一个适合我。

我需要的是一个框架，它允许我在模型更改时自动更新视图（所以如果我在视图中显示数组中的所有项目，并且然后我将另一个项目添加到数组中，视图中的列表应该自行更新），这样我就可以将我的Javascript与HTML 完全分开（至少尽可能多）。如果已经有一个很好的界面可以通过AJAX调用从RESTful API获取模型的信息，那么将获得额外的积分 - 但这并不是严格要求的。

关于我应该怎么做的任何想法？我对Javascript并不十分熟悉，但我也不会完全浑身湿透。我已经看过将Backbone.js与ICanHaz.js + Moustache.js结合起来了，但是我不能完全确定这是否解决了我的问题，只要对该更改进行更改就希望视图“更新自身”模型。

Answer 1

您正在描述MVVM模式的特性。我已经在几个解决方案中成功使用了Knockout.js，这类似于你想要做的事情。另外，Knockout为Ajax调用提供了一些便利功能，但如果你需要完全控制，你可以使用jQuery或两者兼而有之。

Answer 2

http://batmanjs.org/很新，我认为它在更新视图方面完全符合您的要求。它是通过观察者模式完成的。他们在那里有一些非常优秀的概念，分离html和javascript，删除了许多需要完成的常见事件绑定。非常值得一看。

Mulberry是另一个即将发布的框架，看起来非常有前途http://mulberry.toura.com

Answer 3

Ext-JS，http://docs.sencha.com/ext-js/4-0/，有很多数据驱动的小部件，比如树，网格和数据视图

例如，网格的http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel数据来自商店http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store，当您向商店添加记录时，网格会自动更新其视图

Ext.define('ImageModel', {
    extend: 'Ext.data.Model',
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});

var store = Ext.create('Ext.data.JsonStore', {
    model: 'ImageModel',
    proxy: {
        type: 'ajax',
        url: 'get-images.php',
        reader: {
            type: 'json',
            root: 'images'
        }
    }
});
// This will fetch JSON from the URL above and the grid updates once the load is completed
store.load();

// This is loading data inline if you don't want to automatically hook up to a URL
// Again, the view updates automatically when you update the underlying store
store.loadRecords({
   images: [
       {name: 'Anything', url: 'http://www.img.com/idkdk', size: 54545, lastmod: '2011-08-01T02:12:36'}          
   ]    
});

除此之外，Ext还在客户端实现了MVC。 http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

Ext商店也可以使用CRUD，并在您添加和删除商店中的记录时自动发送请求CREATE，READ，EDIT，DELETE命令。

Javascript网络应用的最佳解决方案

3 个答案: