Question

我想知道是否有一种方法可以使用JavaScript而不是直接使用HTML来创建可恢复的UI控件（例如表，列表，不同的布局等）。我在SAP UI5中看到了类似的控件，您可以在其中创建不同UI控件的对象，主要使用JavaScript和HTML DOM创建由相应的处理渲染器。

关于如何使用支持绑定的JavaScript和jQuery从头开始创建类似控件的建议是什么？

是否有其他类似于SAP UI5的库或框架提供了丰富的UI控件（例如表，列表等）？

Answer 1

查看javascript模板。有关示例，请参阅mustache.js。

e.g。

<script type="text/template" id="template">
   {{#elements}}
      <div id="{{id}}">
         {{content}}
      </div>
   {{/elements}}
</script>

你的JavaScript：

var view = {
   "elements": 
    [
       {
          id: "one",
          content: "Lorem ipsum dolor"
       },
       {
          id: "two",
          content: "Sit amet consectetur"
       }
    ]
}

var template = document.getElementById("template").innerHTML;
var output = Mustache.render(template, view);
console.log(output);
logs:

<div id="one">
   Lorem ipsum dolor
</div>
<div id="two">
   Sit amet consectetur
</div>

您可以遍历对象，评估函数并将其作为文本插入。

如果您使用angularJS，您可以通过为您的组件创建一个单独的html文件然后将其作为元素调用到您的页面来创建可重用的html片段。

app.directive("elementName", function() {
  return {
    restrict: 'E',
    templateUrl: "/Path/To/Html.file"
  };
});

然后，在每个html页面中，您只想执行以下操作：

<element-name></element-name>

如何使用JavaScript创建可重用的UI控件

1 个答案: