Question

目前我使用他们的API编写了一个推特小部件。但是对于某些网站，我需要更改输出的布局和HTML结构。

目前我像这样构建HTML：

// Generate HTML
var $con;
$con = $("<div>", { "class" : "tweet" })
  .append($("<div>", { "class" : "twocol" })
    .append($("<div>", { "class" : "tweet-profile-photo" })
      .append($("<img>", { "src" : obj.user.profile_image_url, "class" : "responsive-img" }))
    )
  )
  .append(($("<div>", { "class" : "tencol last" })
    .append(($("<div>", { "class" : "tweet-head" })
      .append($("<div>", { "class" : "eightcol" })
        .append($("<div>", { "class" : "tweet-name" })
                    .append(obj.user.name)
                )
        .append($("<div>", { "class" : "tweet-to-from" }))
      ))
      .append($("<div>", { "class" : "fourcol last tweet-date" })
                .append(((settings.disableDate===true)?"":fullDate))
            )
    ))
    .append($("<div>", { "class" : "twelvecol tweet-text" })
      .append($("<span>")
        .append(text)
      )
    )
    .append($("<div>", { "class" : "tweet-footer" })
      .append($("<div>", { "class" : "twelvecol", "style" : "display:none;" })
        .append($("<i>", { "class" : "fa fa-retweet", "aria-hidden" : "true" }))
        .append($("<span>", { "class" : "tweet-retweeted" }))
      )
    )
  );

$(container).append($con);

正如我上面所说，有时我需要更改布局和输出内容，有没有办法可以制作某种模板，所以我可以制作不同的标题，然后为每条推文的正文制作不同的模板。然后我可以将它发送到JavaScript，它将使用内容填充HTML。

关于我如何做到这一点的任何想法？我在思考XAML或沿着它们行，它就像保持它基于对象而不是搜索字符串或类似的东西。

Answer 1

尝试jQuery templates，这很简单，但是做了工作，我已经使用过它并且效果很好。

简短介绍here

稍后修改：似乎已迁移到jsRender

稍后编辑：此处另一个轻量级纯Javascript版本：JavaScript template engine in just 20 lines

JavaScript模板系统

1 个答案: