Question

说我有以下代码：

var rightPane = $("#right");
    // Draw the right pane
    rightPane.html('<h2>' + task.task + '<h2> <hr />' +
                     'data1: <input type="text" id="data1" value="' + task.data1 + '" /> <br />' + 
                     'data2: <input type="text" id="data2" value="' + task.data2 + '" /> <br />' + 
                     'data1: <input type="text" id="data3" value="' + task.data3 + '" /> <br />' + 
                     '<input type="button" id="subUpdated" value="Save">');

我有没有办法像简单的HTML代码一样编写HTML代码，而没有qoutes和加号？

Answer 1

在当前版本的JavaScript中，您可以通过转义行末尾的换行符来实现此目的，这更好地是位，但请注意前导空格将包含在字符串中，并且您仍然必须使用串联来交换你的值：

var rightPane = $("#right");
// Draw the right pane
rightPane.html('<h2>' + task.task + '<h2> <hr />\
data1: <input type="text" id="data1" value="' + task.data1 + '" /> <br />\
data2: <input type="text" id="data2" value="' + task.data2 + '" /> <br />\
data1: <input type="text" id="data3" value="' + task.data3 + '" /> <br />\
<input type="button" id="subUpdated" value="Save">');

在下一版本的JavaScript中，＆＃34; ES6＆＃34;，我们将拥有模板字符串，它可以是多行的，可让您轻松地使用{交换文字{1}}：

${...}

（字符串中还包含前导空格。）

要在ES6之前执行此操作，您可以使用多个模板库（Handlebars，Moustache，RivetsJS）中的任何一个。

对于一个非常简单的版本，您可以将the function I wrote用于另一个问题。

Answer 2

您可以创建自己的超简单“模板引擎”。

将您的模板写入页面的标记中，就像通常的元素一样。
为模板容器元素指定一个属性，以表示其作为模板的角色，例如data-template的数据属性。
在DOM准备就绪时克隆并分离所有data-template个元素。
在某些情况下，根据需要插入您的值，然后将已编译的模板重新插入页面。

例如：

$(document).ready(function() {
  var template = $('[data-template]').detach().clone();  
  var values = { foo: 'bar', yipee: 'yahoo' };
  
  $('button').click(function() {
    for(var prop in values) {
      template.find('[data-value="' + prop + '"]').html(values[prop]);
      $('#container').append(template);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Insert</button>

<div id="container"></div>

<div data-template>
  <div data-value="foo"></div>
  <div>
    <div data-value="yipee"></div>
  </div>
</div>

Answer 3

目前不是，除了其他人提到过的模板。但是，您可以做的是在主文档中包含初始HTML代码，然后使用rightPane.val(task.data1);等设置值。

Answer 4

您可以尝试执行以下操作：Format a string using placeholders and an object of substitutions?

但正如Hacketo建议学会使用模板更好。例如，请查看underscore.js（http://underscorejs.org/#template）

Answer 5

接近这个的另一种方法是：

var $h2     = $("<h2>", {text : task.task});
var $data1  = $("<input>", {type : 'text', value : task.data1});
var $data2  = $("<input>", {type : 'text', value : task.data2});
var $data3  = $("<input>", {type : 'text', value : task.data3});
var $button = $("<input>", {type : 'button', value : 'Save'});

rightPane.append($h2, $data1, $data2, $data3, $button);

在扫描代码时，这可能会更容易理解，而不是转移.html()函数。

Answer 6

您可以查看JavaScript模板引擎。比如Handlebars，Mustache等。你可以看到一些流行的here：你可以 kind 查看这些作为用户控件，类似于你在ASP.NET中获得的

这是代码的Handlebars示例：

<h2>{{task}}<h2> <hr />
data1: <input type="text" id="data1" value="{{data1}}" /> <br /> 
data2: <input type="text" id="data2" value="{{data2}}" /> <br /> 
data1: <input type="text" id="data3" value="{{data3}}" /> <br /> 
<input type="button" id="subUpdated" value="Save">

Javascript - 更好的方式将html写入＆＃34;追加＆＃34;功能

6 个答案: