1

基本上,如果您有一个纯粹的 JS 应用程序(从 socket.io 或从具有 ajax 请求的服务器获取信息),并且您需要在处理后显示这些数据,您使用的是什么技术?

目前我正在使用类似的代码手动创建元素

var myDiv = new Element('div',{ /* options */);

并将它注入到我需要制作所有 DOM 结构的地方。我发现这很难维护,尤其是对于那些可以编写 html 代码但无法从 JS 编写 html 代码的设计师而言。

有什么方法可以改善这个过程吗?从ajax获取html更好吗?或者只是在字符串中制作html代码?

我正在寻找维护和资源方面的最佳选择。

4

5 回答 5

1

您正在寻找的是“模板”。

您有一个 HTML 模板(一些 div 等),并将其与您在 JS 中提供的数据绑定。然后,无论您使用什么模板引擎,您都可以获得完整的 HTML。

这里有一些模板引擎:

以及使用板块的代码示例:

var Plates = require('plates'); // specific to node.js, see for client-side use

var html = '<div id="test">Old Value</div>';
var data = { "test": "New Value" };

var output = Plates.bind(html, data); 
console.log( output ); // '<div id="test">New Value</div>'

您可以将模板存储在通过 ajax 加载的单个文件(“templates.html”)中,也可以将其存储在 HTML 页面中(不建议用于维护问题)。

如果将它们全部存储在外部文件中,则可以执行以下操作:

模板.html:

<!-- text/html isn't parsed by the browser so we can put anything in it -->
<script type="text/html" id="template1"> 
    <!-- put your template in there
</script>

您可以通过getElementById( 'template1' ).

于 2012-08-18T00:35:19.063 回答
1

如果项目处于后期阶段,最简单的方法是添加 jQuery.template 插件之类的东西并在单独的文件中创建模板。然后,使用后端将这些和平组合在单个页面中,并在 DOM Ready 上启动您的客户端应用程序。

如果您的项目处于早期阶段,请使用 AngularJs 或 BackboneJS 框架。相信我,每一分钱都是值得的:)

于 2012-08-18T00:35:45.700 回答
0

我建议你看看Backbone.js

Backbone.js 通过提供具有键值绑定和自定义事件的模型、具有丰富的可枚举函数 API 的集合、具有声明性事件处理的视图,并通过 RESTful JSON 接口将所有这些连接到您现有的 API,从而为 Web 应用程序提供了结构

即使我没有使用 RESTful 接口,我也会使用骨干网。将结构与行为分开非常容易......您可以使用 jQuery 实现相同的效果,但它不会那么整洁。它是 MV* 框架之一。你有:

  1. 包含交互式数据以及围绕它的大部分逻辑的模型:转换、验证、计算属性和访问控制。
  2. 集合是有序的模型集。
  3. 视图:总体思路是将您的界面组织成逻辑视图,由模型支持,每个视图都可以在模型更改时独立更新,而无需重新绘制页面
  4. 路由器提供路由客户端页面并将它们连接到动作和事件的方法

最近很受关注。使用 Backbone 创建的应用程序包括:

  1. 四方
  2. 移动领英

如果您开始使用 Backbone,这是一个很好的资源。

于 2012-08-18T00:30:37.983 回答
0

远端模板http://code.google.com/p/distal/

 <table id="a"> 
   <tr><th>OPINIONS</th></tr> 
   <tr data-qrepeat="m keywords"><td data-qtext="m.name"></td></tr> 
 </table> 

然后调用:

distal(document.getElementById("a"), {
  keywords: [
    {name:"Brilliant"}, {name:"Masterpiece"}, {name:"Witty"}
  ]
});

会变成:

 <table> 
   <tr><th>OPINIONS</th></tr> 
   <tr><td>Brilliant</td></tr> 
   <tr><td>Masterpiece</td></tr> 
   <tr><td>Witty</td></tr> 
 </table> 
于 2012-09-03T09:49:33.327 回答
0

并将它注入到我需要制作所有 DOM 结构的地方。我发现这很难维护,尤其是对于那些可以编写 html 代码但无法从 JS 编写 html 代码的设计师而言。

另一种选择是适度的。正如您从文档中看到的那样,它消除了 javascript 中对 HTML 块的需求。设计者无需查看javascript就可以改变HTML结构,javascript编码人员可以使用设计者定义的参数来填写数据(全部在javascript中)。

此示例来自自述文件:

HTML:

<div>
  <contact>
    <name>Casey Jones</name>
    <phone>123-456-7890</phone>
  </contact>
</div>

Javascript:

var contact = {
  name : "Casey Jones",
  cell : "123-456-7890"
};
var out = modest.render('contact',contact);
于 2012-09-03T16:31:59.013 回答