有没有一种方法可以使HTML块可重用？

Question

我希望能够重复使用网页应用程序中的HTML块内容（我使用jQuery和Bootstrap）。

我有一个像这样的大型HTML块：

<div class="row form-group">
    <label class="col-lg-4 control-label" for="distMotors">Drawing size</label>
    <div class="col-lg-8">
        <div class="col-sm-6" style="padding: 0px">
            <label style="width:5em; float:left; padding-top: 8px;"
                    class="control-label visible-xs" for="drawingWidth">Width</label>
            <div class="input-group" style="max-width: 10em">
                <input disabled type="number" id=drawingWidth min="10" max="500"
                        class="form-control" placeholder="150" data-error="Set a number between 10 and 500.">
                <span class="input-group-addon">cm</span>
            </div>

        </div>
        <span class="col-sm-1 hidden-xs"style="text-align: center; padding: 7px 0px">X</span>
        <label style="width:5em; float:left; padding-top: 8px;"
                class="control-label visible-xs" for="drawingHeight">Height</label>
        <div class="col-sm-5" style="padding: 0px">
            <div class="input-group" style="max-width: 10em">
                <input disabled id=drawingHeight type="number" min="10" max="500"
                        class="form-control" placeholder="150" data-error="Set a number between 10 and 500.">
                <span class="input-group-addon">cm</span>
            </div>
        </div>
        <span class="help-block">Width and height of the drawing on the showcase.</span>
        <div class="help-block with-errors"></div>
    </div>
</div>

我的页面中有几个类似这个的块，所以我的html文件会变得很混乱。 我正在寻找一个库或一个小框架来做这样的事情：

• 首先，我定义我的html块的结构和外观；
• 然后我使用它多次，并且只更改感兴趣的值，如id，placeholder等。

有这样的东西吗？

- roipoussiere

---

自定义标签库。谷歌一下。 - takendarkk

你们的 Web 应用程序使用哪种语言/技术？（MVC、C#/VB、PHP、JSP、ASP.NET） - yW0K5o

这是一个小型的Web应用程序，我只使用Bootstrap和jQuery。如果它变得更大，我可能会使用AngularJS。 - roipoussiere

@Takendarkk 謝謝！但自定義標籤庫似乎是針對 JSP 頁面的，而我的項目並不使用這種技術。:/ - roipoussiere

Answer 1

您可以使用jQuery复制顶部

，更改其中一些属性，然后将其插入到页面的其他位置。根据您拥有的后端技术堆栈，大多数都支持部分视图，这些视图正是为此类情况而构建的。

jQuery:

var element = $('.row.form-group').clone();
element.children('.input-group').attr('id', new_id); // change attribute
$('.new_parent').append(element); // .new-parent is the class of the element to which you want to append the copy

- dinomix

---

谢谢！我喜欢这个简短的解决方案！ - roipoussiere

尝试了这个方法之后，确实变得更好了，但是现在我的HTML文件有时候包含了HTML元素，有时候又包含了JS元素，我不喜欢这种情况。 - roipoussiere

你知道有没有任何用特殊标签在HTML中完成这个任务的库/框架吗？ - roipoussiere

查看handlebars.js或mustache.js以获取基本的HTML模板。如果您正在寻找组件框架，请查看react.js。React不仅仅是模板，但这是其中的一个重要部分。您必须使用称为JSX的javascript内部的特殊语法在其中构建应用程序。对于某些应用程序（如Facebook），它可能很有用。 - dinomix

只是想要回应关于在JS中混合HTML的内容，实际上在这种情况下，你仅使用JS来生成新的HTML，而不是在JS中定义它，所以我认为这是合理的。如果您更改了HTML文件中的原始HTML，则JS不需要更新（除非当然是您正在使用的类来复制但可以标准化）。因此，在这种情况下，JS只是一个引擎，而没有将“视图”与“逻辑”混合在一起。除非您仅使用纯静态内容，否则在某个时候您将不得不从JS或服务器端生成HTML。 - dinomix

能否从一个页面复制并粘贴到另一个页面？ - Jmainol

Answer 2

你可以创建一个包含你的id、占位文本等信息的多维数组，并循环创建你的表格。

例如: https://jsfiddle.net/gue9ryqo/ HTML

<div id='contents'></div>

JQUERY

var arr = [
    ['one', 'placeholder1'],
    ['two', 'placeholder2'],
    ['three', 'placeholder3']
    ];
for(i=0; i<arr.length; i++){
   $('#contents').append(
       "<div>"+
        "<label>Label</label>"+
            "<input type='text' id='"+arr[i][0]+"' placeholder='"+arr[i][1]+"'/>"+
       "</div>"
       );
    }

- wizloc

---

谢谢cshanno！它运行得非常好，但是我是MVC用户，不想像这样在JS中制作HTML内容。 - roipoussiere