0

我有一个页面，该页面由一个包含多个组件 div 的容器组成。标记中有许多这样的容器（套件类型和版本），我根据用户通过选择框所做的选择来显示/隐藏适当的容器。

组件 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'。

有时类型与名称具体相关，例如，“gadget”组件始终具有“reference”类型。

链接

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

客观的：

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

我希望 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;博士

“WTF老兄？！这件事太大了！你丑又蠢。”

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

:-(

4

2 回答 2

2

Mustache是最好的框架之一

你可以在这里查看演示

于 2013-01-16T22:16:31.393 回答
1

车把会为您做到这一点。基本思想是您可以使用如下模板将 JavaScript 变量替换到 HTML DOM 中：

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

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

你的问题的一个小提琴在这里：http: //jsfiddle.net/Yk43x/

For more complex templating, including bindings (so your templates update as your JavaScript model does), I'd recommend Knockout. EmberJS, which uses Handlebars, and Google Angular also enable templating (and bindings), as well as a lot more.

于 2013-01-16T22:34:34.087 回答