javascript - 在通过 jQuery 插入 HTML 时，如何将行为和内容分开？

Question

我正在构建一个简单的待办事项列表应用程序，当它工作时，我怀疑我可以做得更好。

listItem 是每个元素作为列表项的类。 .delete 是删除列表项的临时解决方案。

$('ul').append('<li class="listItem"><h2>' + textField + '</h2><h3 class="delete">X</h3></li>')

有没有一种方法可以在插入此 HTML 的同时将 JavaScript 与标记分开？我可以将 HTML 保存为某种原型(prototype)，它会自动插入 textField 值吗？

我正在考虑让每个列表项的标记更复杂一些，所以我不希望它变得更加困惑。我是否需要添加另一个框架(可能像 AngularJS)来完成我想做的事情？在我的 JavaScript 中有这么多标记是否可以接受？

让我知道是否有更多我的代码可以帮助回答这个问题。

编辑:在 GitHub 上如果有人感兴趣的话。

Answer 1

如果您要创建繁重的 JavaScript 渲染，也许有更好的库，例如 Angular.js。但是这个问题可能会导致基于意见的答案并且没有用。谁能说出哪个框架适合谁的需求？

如果您的特殊需求只是实现一个包含文本内容和删除按钮的简单元素列表，您可以使用 jQuery。

我fiddled a bit of code用于删除按钮。

/* element rendering [can be populated within a loop or from an array] */
var textField = "this is text";
$('ul').append('<li class="listItem"><h2>' + textField + '</h2><h3 class="deleteThis">X</h3></li>');

/* remove button */
$(document).on("click", ".deleteThis", function() {
    $(this).parent('.listItem').remove();
});

然后您要做的就是用您的文本/内容解析您的 html。

关于您的问题:“如何在通过 jQuery 插入 HTML 时将行为和内容分开？”；好吧，您只是通过使用 jQuery 来 .append() 您的元素来做到这一点。