Как правильно отделить JavaScript View/Logic code [закрыто]

Я получаю объекты JSON из websocket с флагами обновления/создания/удаления. На основе этой информации я обновляю, создаю или удаляю HTML-элементы и связываю обратные вызовы. Это может повлиять на несколько элементов HTML.

мой текущий подход состоял в том, чтобы поместить все в определенные объекты, которые обрабатывают генерацию HTML через jquery, например: 

$.("<table>").addChild($("<tr>")).addClass('test')

и привязать слушателя события. Но с добавлением все больше и больше кода он стал действительно грязным, и теперь я ищу правильный способ отделить код.

есть ли идеи, как это сделать правильно? Рамки? Может быть, Шаблоны jQuery (которые все еще оставляют меня в темноте о том, как добавить обратные вызовы чисто)?

7
html javascript jquery model-view-controller templates

5 ответов

в вашем случае я могу порекомендовать вам посмотреть Knockoutjs , AngularJS или костяк.js.

0

посмотрите структуру MVVM. Это именно то, что вам нужно, как ваш JavaScript становится все более сложным. Он разделяет ваши потребности для беспокойства между кодом презентации (html) и логикой презентации (JavaSript)

нокаут.js - это действительно хорошая библиотека, чтобы вы начали, я рекомендую идти через учебники, чтобы вы начали на нем.

быстрая пример:

файл HelloWorld.HTML-код

<div data-bind="value: helloWorldVariable"></div>
<input type="button" data-bind="click: helloWorld" />

4

для рендеринга html вы можете использовать Handlerbars.js Он очень зрелый и имеет много документации

для привязки событий я рекомендую вам использовать делегат jQuery на родительском объекте, который не был удален с обновлением ajax. Таким образом, вам нужно только переназначить события по каждому запросу

0

проверить костяк.js. Это очень популярная и гибкая настройка MVC-ish для приложений браузера JS. Код размещен на github.

0

нокаут JS возможно, стоит посмотреть, он отделяет модель данных от модели представления и заботится о зависимостях между ними.

0