Question

有时我需要将一个html片段分配给javascript var，例如，

var homePage =
    '<div>' +
        '<div class="header"><h1>Page Slider</h1></div>' +
        '<div class="scroller">' +
                '<ul class="list">' +
                '<li><a href="#page1"><strong>Build Bot</strong></a></li>' +
                '<li><a href="#page2"><strong>Medi Bot</strong></a></li>' +
                '<li><a href="#page3"><strong>Ripple Bot</strong></a></li>' +
            '</ul>' +
        '</div>' +
    '</div>';

这可以很好用，但它会让编辑变得有点困难。我可以知道任何框架都可以优雅地做到这一点吗？

Answer 1

使用handlebars.js这是怎么回事：

服务器端：

将JSON对象发送回javascript。我经常使用这样的东西： echo json_encode(array('object_name'=>$obj));

HTML

在您的网页上创建一个容器。 <div id="#my_template_container"></div>

使用Javascript：

通常在你的AJAX成功函数中：

将您的数据解析为JSON对象：
var my_obj= JSON.parse(data);
创建对模板的引用：
var tmpl = $("#my_layout").html();
使用Handlebars引擎编译模板：
var theTemplate = Handlebars.compile(tmpl);
将模板附加到HTML
$('#my_template_container').html(theTemplate(my_obj));

模板

使用它的名称访问模板中的对象，在此示例中，它将是： object_name 我在PHP的echo json_encode(array('object_name'=>$obj))语句中指定的变量。
使用{{Property_Name}}访问对象的属性。
要访问对象子属性，请使用嵌套路径运算符：{{Propert_Name.ID}}

   <script id="my_layout" type="text/x-handlebars-template">
        {{#object_name}}
         '<div>' +
                '<div class="header"><h1>Page Slider</h1></div>' +
                '<div class="scroller">' +
                        '<ul class="list">' +
                        '<li><a href="#page1"><strong>{{property1}}</strong></a></li>' +
                        '<li><a href="#page2"><strong>{{property2}}</strong></a></li>' +
                        '<li><a href="#page3"><strong>{{property3}}</strong></a></li>' +
                    '</ul>' +
                '</div>' +
            '</div>';
        {{/object_name}}

        </script>

Answer 2

我创建了一个非常轻巧的插件，只是为了时间，当你只想在js中使用一些html时，并不需要很多选项提供我的模板框架，因此想要避免重js。

咖啡脚本

(($) ->
  utCache = {}
  $.fn.ut = (tmplID, obj) ->
    _tmpl = (str) ->
      fn = "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "'); return p.join('');"
      new Function("o", fn)
    _getData = (ele) ->
      $(ele).html utCache[tmplID](obj)
    @each ->
      ele = this
      utCache[tmplID] = _tmpl($(tmplID).html()) unless utCache[tmplID]
      _getData ele
) jQuery

<强>的Javascript

(function($) {
  var utCache;
  utCache = {};
  return $.fn.ut = function(tmplID, obj) {
    var _getData, _tmpl;
    _tmpl = function(str) {
      var fn;
      fn = "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "'); return p.join('');";
      return new Function("o", fn);
    };
    _getData = function(ele) {
      return $(ele).html(utCache[tmplID](obj));
    };
    return this.each(function() {
      var ele;
      ele = this;
      if (!utCache[tmplID]) {
        utCache[tmplID] = _tmpl($(tmplID).html());
      }
      return _getData(ele);
    });
  };
})(jQuery);

你可以像使用

一样使用它

$('#my-div').ut("#my-template", { name: 'jashwant'});

当我们关注 HTML：

时

<div id='my-div'></div>

<script type='javascript' id='my-template'>
  <p><%=o.name %> welcomes you !</p>
</script>

Answer 3

使用Javascript的document方法。

var topdiv = document.createElement('div');
var headerDiv = document.createElement('header');
var header = document.createElement('h1');
header.innerHTML = 'Page Slider';
headerDiv.appendChild(header);

// etc....

或使用模板。

Answer 4

只需使用反斜杠来逃避换行符。

例如：

var homePage =
    '<div> \
        <div class="header"><h1>Page Slider</h1></div> \
        <div class="scroller"> \
                <ul class="list"> \
                <li><a href="#page1"><strong>Build Bot</strong></a></li> \
                <li><a href="#page2"><strong>Medi Bot</strong></a></li> \
                <li><a href="#page3"><strong>Ripple Bot</strong></a></li> \
            </ul> \
        </div> \
    </div>';

如果您想在字符串中包含换行符，请使用\n\代替\。

在javascript中分配html片段

4 个答案:

服务器端：

HTML

使用Javascript：

模板