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>

结果：

Chrome Inspector

Answer 1

您需要将 h1 作为模板的一部分并在 el 中呈现（因此 tagName 财产被省略）或＆＃39;插入＆＃39; html中的渲染视图（使用tagName，className，id和attributes属性[不带 el 属性]构建）。

link:

this.el可以从DOM选择器字符串或Element中解析出来;否则，它将从视图的tagName，className，id和attributes属性创建。如果没有设置，this.el是一个空div，通常很好。

Marionette.js 2.4.1 - tagName无效

1 个答案: