Лучшее решение для веб-приложения Javascript

Question

В настоящее время я работаю над веб-приложением, похожим на Google Reader (по крайней мере, с точки зрения того, какая информация обрабатывается).Я построил элементарный прототип, используя только простые Javascript и jQuery, но довольно быстро обнаружил, что он становится очень грязным, очень быстрым.

Итак, сегодня я смотрел, какие платформы MVC выходяттам для приложений Javascript.Это архитектура разработки, с которой я знаком, и она очень хорошо соответствует тому, что я пытаюсь сделать.Я нашел несколько альтернатив: SprouteCore , Backbone.js и Knockout.js (не MVC, но достаточно близко).У всех них есть свои плюсы и минусы, но я не уверен, какой из них мне подойдет.

Мне нужен фреймворк, который позволяет мне автоматически обновлятьпосмотреть, когда модель изменится (поэтому, если я, на мой взгляд, отображаю все элементы из массива, а затем добавляю еще один элемент в массив, список в представлении должен сам обновиться), и это позволяет мне чисто отделите мой Javascript от моего HTML (по крайней мере, насколько это возможно).Дополнительные баллы начислялись бы, если бы у него уже был хороший интерфейс для извлечения информации для моделей из RESTful API через вызовы AJAX - но это не обязательно.

Любые мысли о том, как мне поступить об этом? У меня не очень большой опыт работы с Javascript, но я не совсем мокрый за ушами.Я смотрел на объединение Backbone.js с ICanHaz.js + Moustache.js , но я не совсем уверен, решает ли это мою проблему с желанием, чтобы представление "само обновлялось"«всякий раз, когда в модель вносятся изменения.

Answer 1

http://batmanjs.org/ является довольно новым, и я думаю, что это именно то, что вам нужно с точки зрения обновления представления. Это делается с помощью шаблона Observer. У них есть некоторые действительно отличные концепции, разделение html и javascript, устранение большого количества обычной привязки событий, которую необходимо выполнить. Стоит посмотреть.

Mulberry - это еще один фреймворк, который скоро будет выпущен, он выглядит очень многообещающе http://mulberry.toura.com

Answer 2

вы описываете самые свойства шаблона MVVM.Я успешно использовал Knockout.js в нескольких решениях для того, что напоминает то, что вы хотите сделать.Кроме того, в Knockout есть несколько удобных функций для вызовов Ajax, но вы всегда можете использовать jQuery или оба, если вам нужен полный контроль.

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

Внешние хранилища также могут использовать CRUD и автоматически отправлять команды CREATE, READ, EDIT, DELETE запроса по мере добавления и удаления записей из хранилища.