Marionette.js 2.4.1 - tagName 不工作

Question

我正在尝试学习 Marionette.js 的教程，但我运行遇到了一个我不知道如何解决的问题。鉴于下面的代码，我希望看到呈现为 #insertion-point 元素的子元素的视图，包裹在 h1 标记中。

通过使用 Chrome 的检查器查看 DOM，我可以看到该视图确实呈现为 #insertion-point 的子视图，但不在 h1 中标签。

我是不是误解了它应该如何工作，或者这是一个错误？控制台没有错误。

谢谢！

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Marionette Contact Manager</title>
    <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="./css/application.css" rel="stylesheet">
</head>

<body>

    <div id="insertion-point"></div>


    <!-- TEMPLATES -->

    <script type="text/template" id="template">
        <p>Template text</p>
    </script>


    <!-- SCRIPTS -->

    <script src="./lib/jquery/jquery.js"></script>
    <script src="./lib/json2/json2.js"></script>
    <script src="./lib/underscore/underscore.js"></script>
    <script src="./lib/backbone/backbone.js"></script>
    <script src="./lib/marionette/backbone.marionette.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.js"></script>


    <!-- MARIONETTE APP -->

    <script type="text/javascript">

    var ContactManager = new Marionette.Application();

    ContactManager.StaticView = Marionette.ItemView.extend({
        template: '#template',
        el: '#insertion-point',
        tagName: 'h1'
    });

    ContactManager.on('start', function() {
        var staticView = new ContactManager.StaticView();
        staticView.render();
    });

    ContactManager.start();

    </script>
</body>
</html>

结果：

Answer 1

您需要将 h1 作为模板的一部分，然后在 el[=22= 中呈现]（因此 tagName 属性被省略）或 'insert' 呈现的视图（使用 tagName、className、id 和 attributes 属性构建 [没有 el 属性]) 在 html 某处。

link:

this.el can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName, className, id and attributes properties. If none are set, this.el is an empty div, which is often just fine.

Marionette.js 2.4.1 - tagName 不工作

Marionette.js 2.4.1 - tagName not working

javascript

marionette