7

我从带有更新/创建/删除标志的 websocket 接收 JSON 对象。根据这些信息，我可以更新、创建或删除 HTML 元素并绑定回调。这会影响多个 HTML 元素。

我目前的方法是将所有内容放入通过 jquery 处理 HTML 生成的特定对象中，例如：

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

并绑定事件监听器。但是随着越来越多的代码的添加，它变得非常混乱，现在我正在寻找一种合适的方法来分离代码。

关于如何正确执行此操作有什么想法吗？构架？也许是 jQuery 模板（这仍然让我对如何干净地添加回调一无所知）？

4

5 回答 5

4

查找 MVVM 框架。这正是您所需要的，因为您的 JavaScript 变得越来越复杂。它将您的演示代码 (html) 和演示逻辑 (JavaSript) 之间的关注点分开

Knockout.js是一个非常好的帮助您入门的库，我建议您阅读教程以帮助您入门。

快速示例：

HelloWorld.html

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

page.js：

var ViewModel = {
   helloWorldVariable: ko.observable('test'),
   helloWorld: function() {
       this.helloWorldVariable('clicked!');
   }
}

// Bind viewmodel

当按钮被点击时，div会自动显示“clicked”。这显然可以在通过 AJAX 请求从服务器检索信息时使用，并且您不必依赖控件 ID/CSS 类。它们可以随时更改，并且您的代码仍然相关。

于 2012-09-27T15:29:04.923 回答
0

要渲染 html，你可以使用Handlerbars.js它非常成熟并且有很多文档

对于事件绑定，我建议您在未通过 ajax 更新删除的父对象上使用jQuery 委托。这样您只需要在每个请求上重新分配事件

于 2012-09-27T15:26:23.803 回答
0

在您的情况下，我可以建议您查看Knockoutjs、AngularJS或Backbone.js。

于 2012-09-27T15:29:16.983 回答
0

查看Backbone.js。这是一个非常流行和灵活的 MVC 风格的 JS 浏览器应用程序。代码托管在github 上。

于 2012-09-27T15:29:24.373 回答
0

Knockout JS可能值得一看，它将数据模型与视图模型分开，并处理它们之间的依赖关系。

于 2012-09-27T15:29:31.517 回答