的关系：

Question

我有一个由容器组成的页面，里面有几个组件div。标记中有许多这些容器（套件类型和版本），我根据用户通过选择框进行的选择显示/隐藏适当的容器。

组件的内容会改变，但HTML标记基本相同。

组件HTML框架是：

<div class="docs basicEdition720">  // 2nd class here is the suite type/version
  <div class="component" title=" /* component title here */ ">
    <p class="componentName"> /*component name here */ </p>
    <p class="componentType"> /*component type here */ </p>
    <p class="links"> /*component links here */ </p>
  </div>
</div>

这里的要点是我有“whizbang”组件，它可能出现在几个不同的容器中，只要容器的版本相同，它就会有完全相同的内容。当容器的版本发生变化时，通常唯一的变化是whizbang组件将成为链接。

例如，在基本版本720套件类型和版本中，whizbang组件的内容与企业版版本720中的whizbang组件完全相同套件。

的关系：

标题/名称

组件标题和名称永远不会根据版本更改。它们具体地相互直接相关。如果是'A'，那么'B'。

类型

组件类型偶尔会根据我们正在使用的组件名称的VERSION而更改。对于7.2.0，“bojangle”组件可能是“admin”类型，但对于版本7.0.4，可能是“user”类型。如果'A'和'1'，那么'B'。如果是'A'和'2'，那么'C'。

有时类型与名称具体相关，如“小工具”组件ALWAYS具有“引用”类型。

链接

链接总是根据组件的版本而改变。

目的：

我只想在文档中一次更新不同组件版本的链接，而不是我目前正在做的十几个。

我希望javascript根据已知的套件类型和版本自动生成容器。我可以给它一个框架来了解哪些组件属于哪里，例如：

<div class="docs basicEdition720">  // Here we have the basic edition of the
  <div class="comp gadget">         // suite, version 7.2.0. That means I know 
  <div class="comp bojangle">       // we have the gadget, bojangle, widget, 
  <div class="comp widget">         // and gizmo components.
  <div class="comp gizmo">
</div>

<div class="docs basicEdition704">  // Now we have the basic edition suite, 
  <div class="comp gadget">         // version 7.0.4. Knowing that, I know we 
  <div class="comp gizmo">          // only have the gadget, gizmo,and whatsit
  <div class="comp whatsit">        // components.
</div>

<div class="docs enterpriseEdition720">  // Now we have the enterprise edition
  <div class="comp gadget">              // suite, version 7.2.0. Hey, looks 
  <div class="comp bojangle">            // pretty much the same as the basic 
  <div class="comp widget">              // edition of the same version...
  <div class="comp gizmo">
</div>

<div class="docs enterpriseEdition704">  // Ditto for enterprise suite v7.0.4.
  <div class="comp gadget">
  <div class="comp gizmo">
  <div class="comp whatsit">
</div>

/* more suites and versions */

或者如果在JS中处理版本控制更好，那也没关系。

我已经写了这么多基本的JS，但是没有达到我的目标，而且我对JS很糟糕，我不愿意给你任何一种先发制人/ jsFiddle。基本上，它应该使用HTML框架并根据变量和它知道的套件版本填补空白。

到目前为止，我一直在使用像

这样的东西

var gadgetName = " long name here ";
var bojangleName = " long name here ";
var gadgetLink720 = " version 720 link here";
var bojangleLink720 = " version 720 link here";
var gadgetTitle = " Gadget is a thingie that does...";
var bojangleTitle = " Bojangle is this thing that does...";

$(this).html("<div class=\"component\" title=\"" + myTitle + "\">\
    <p class=\"componentName\">" + myName +"</p>\
    <p class=\"componentType\">Setup Guide</p>\
    <p class=\"links\"><a href=\"\" class=\"html\">HTML</a> <a href=\"\" class=\"pdf\">PDF</a></p>\
  </div>");
});

但一直很不成功。 注意：这不是我所完成的最好的例子，我实际上（曾经一度）读过父div类知道自动投入的版本等等。

TL; DR

“WTF老兄？！事情是巨大的！你和丑陋一样愚蠢。”

我知道，对不起。我不知道我是否可以使它更简洁。 TL; DR是： “哎呀，我有一个有效的页面，但是我一遍又一遍地重复使用相同的内容。每次我们有一个新的版本，我应该像一个好的peon手动更新几十个链接，而不是脚本单源解决方案。忽略我。“

： - （

Answer 1

Mustache是最好的框架之一

您可以查看demo here

Answer 2

Handlebars会为您完成此操作。基本思想是您可以使用以下模板将JavaScript变量替换为HTML DOM：

<p>{{hello}}</p>

它还允许基本循环和逻辑。

问题的答词在于：http://jsfiddle.net/Yk43x/

对于更复杂的模板，包括绑定（因此您的模板会像JavaScript模型一样更新），我建议Knockout。 EmberJS，它使用了Handlebars，Google Angular也启用了模板（和绑定），以及更多。

通过Javascript冷凝重复使用的HTML（基于变量的变体）

的关系：

标题/名称

类型

链接

目的：

TL; DR

2 个答案: