【问题标题】:How to manipulate HTML table once it's returned from backend like Node.js?从 Node.js 等后端返回后如何操作 HTML 表?
【发布时间】:2014-04-15 01:37:55
【问题描述】:

情况如下:我使用 Node.js 作为我的后端,并使用 markdown 来编辑和发布我的博客文章。当客户端请求特定的 URL 时,例如http://www.example.com/blog/article_1,我从 Node.js 返回了博客内容,并带有一些类似 ejs 的模板,如下所示:


app.get("/blog/article1", function(req, res) {
    var article = something // this is a valid HTML converted from a markdown file
    res.render("article1", {
        title: "my blog article 1",
        article: article
    });
});

在上面的代码中,我使用titlearticle 变量渲染article.ejsarticle 变量是要注入 ejs 模板的有效 HTML。到目前为止,一切都很好。

但是,如果我想使用 Bootstrap 3 的响应式表格功能(即<div class="table-responsive"><table class="table">...actual table...</table></div>)显示在原始降价文件中编写的 HTML 表格,我该怎么做?现在我的markdown文件中的表只是一个markdown文件,我认为只修改我插入或用<div class="table-responsive">...</div>行包装的所有markdown文件不是最好的主意;这些文件也可能在 Bootstrap 以外的情况下使用。

换句话说,一旦 Node.js 返回模板,动态或以编程方式将响应功能注入到表中是否可行?选择性地注入响应式表功能是否也可行? (也就是说任意选择一些我要添加响应式功能的表格?)

【问题讨论】:

  • 你用什么把markdown转成html?在转换过程中应该有一个点,您可以为表格等标准元素注入类。
  • 蒂莫西,我用poet
  • Poet 使用 Marked 进行 Markdown 解析和编译。 Marked 支持自定义渲染器以修改 html 输出。不幸的是,Poet 似乎没有为您提供任何自定义标记选项的方法。它隐藏了 templates.js 中 createTemplates 函数背后的所有细节。您可能必须修改 Poet 以公开您可以自定义的 Marked 对象。所有这些可能仍然比仅在客户端修改 HTML 以添加引导类更好。
  • 啊,好的。我确信我不够精通,无法分叉模块并修改内部结构——毕竟,这是我第一次尝试在 Web 应用程序上构建。现在可能最好写一些命令行工具来解析和转换,然后将转换后的文件部署到应用程序中,稍后了解诗人的细节(包括标记)来定制它以供我自己使用.非常感谢您富有洞察力的评论。

标签: javascript html css node.js twitter-bootstrap


【解决方案1】:

从 cmets 继续:实际上,fork 和修改项目并不难。您越快习惯使用开源库,您使用 Node.js 的体验就会越好。在 Node 世界中事情发展得很快,有时事情不会像预期的那样工作。您可以等待修复,也可以卷起袖子加入。

我找到了一种使用 addTemplate 方法更新降价模板的方法。但是,项目使用的 Marked 版本 (2.8) 不支持自定义模板。我已经forked the repository 并更新了标记的版本,并修复了由测试引起的问题。我还添加了一个限制,以防止它使用破坏所有测试的 Express 4。我将这些作为pull request 提交给原始仓库,但与此同时,您可以使用我的版本编写如下内容。

未经测试

var
  express = require('express'),
  app = express(),
  Poet = require('poet'),
  marked = require('marked'),
  renderer = new marked.Renderer();

renderer.table = function(header, body) {
  return '<div class="table-responsive"><table class="table">' + header + body + '</table></div>';
}

var poet = Poet(app, {
  posts: './_posts/',
  postsPerPage: 5,
  metaFormat: 'json'
});

poet.addTemplate({ ext: 'markdown', fn: function(s) {
  return marked(s);
}});

或者,如果你使用poet的只是markdown转换,你还不如直接使用marked,去掉对poet的依赖。

【讨论】:

  • 太棒了!多么有抱负的工作!还有一个问题:为什么在render.table = function(header, body) 中使用+ header + body + ?看起来像Marked wraps them with thead and tbody within it。或者也许在 Bootstrap 中不一定要求在表中使用 theadtbody
  • thead 和 tbody 是可选的。如果您要根据它们调整样式,则可以包括它们。我不确定 twitter bootstrap 是否使用它们。
  • 我刚试了一下,发现marked(s)应该是marked(s, {renderer: renderer})吧?而且我还发现,如果我在我的 markdown 文件中使用 markdown-syntax 编写表格,这很有效,但是当我使用 HTML 语法(即&lt;table&gt;&lt;tr&gt;..&lt;th&gt;..)将这些表格写入 markdown 文件时,渲染和解析不会工作......转换HTML表格和markdown表格仍然可行吗?我应该从这里采取的最佳方向是什么?
  • 也许在将其传递给return (marked(s, {renderer: renderer}));之前,使用正则表达式解析并转换分配给poet.AddTemplate()的对象中的参数s?我没有尝试过,必须先了解 JavaScript 正则表达式,所以无法很快报告结果......
  • 为什么在markdown中使用html表格?如果您使用的是 html 表格,那么为什么不自己包含 css 类呢?
猜你喜欢
  • 2016-08-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-01-02
  • 1970-01-01
  • 2012-05-10
  • 2016-11-01
  • 2014-09-13
相关资源
最近更新 更多