Javascript 无法使模型显示属性_Javascript_Marionette

Javascript 无法使模型显示属性

javascript

Javascript 无法使模型显示属性,javascript,marionette,Javascript,Marionette,我想知道为什么不显示我创建的条目。我正在努力寻找使用木偶的好的简单教程，所以我在这里找到了愤怒的猫教程（），并试图制作一些类似的东西，但更简单，这样我可以更好地理解正在发生的事情。任何帮助都将不胜感激这是Javascript，我使用的是Marionette.js MyApp = new Backbone.Marionette.Application(); MyApp.addRegions({ listBox : "#listBox" }); Entr

我想知道为什么不显示我创建的条目。我正在努力寻找使用木偶的好的简单教程，所以我在这里找到了愤怒的猫教程（），并试图制作一些类似的东西，但更简单，这样我可以更好地理解正在发生的事情。任何帮助都将不胜感激

这是Javascript，我使用的是Marionette.js

    MyApp = new Backbone.Marionette.Application();

    MyApp.addRegions({
    listBox : "#listBox"
    });

    Entry = Backbone.Model.extend({
    defaults: {
        entry : "Blank"
    },
    });

    EntryList = Backbone.Collection.extend({

    model: Entry
    });

    EntryView = Backbone.Marionette.ItemView.extend({
    template: "entry-template",
    tagName: 'tr',
    className: 'entry'
    });

    EntriesView = Backbone.Marionette.CompositeView.extend({
    tagName: "table",
    template: "#entries-template",
    itemView: EntryView,

    appendHtml: function(collectionView, itemView){
        collectionView.$("tbody").append(itemView.el);      
    }
    });

    MyApp.addInitializer(function(options){
        var entriesView = new EntriesView({
            collection: options.ents
        });

        MyApp.listBox.show(entriesView);
    });

    $(document).ready(function(){
        var ents = new EntryList([
            new Entry({ entry: 'abc' }),
            new Entry({ entry: 'def' }),
      new Entry({ entry: 'ghi' })
  ]);
   MyApp.start({entry: ents});
});

以下是html：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Simple Demo</title>
        <link rel="stylesheet" href="assets/screen.css">
    </head>
    <body>
        <div id = "listBox">
        </div>

        <script type="text/template" id="entries-template">
            <thead>
                <tr class='header'>
                    <th>Entry</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </script>
      <script type="text/template" id="entry-template">
            <td><%- entry %></td>
            <td><button class="delete">Delete</button></td>
      </script>
        <script src="js/lib/jquery.js"></script>
        <script src="js/lib/underscore.js"></script>
        <script src="js/lib/backbone.js"></script>
        <script src="js/lib/backbone.marionette.js"></script>
        <script src="js/demo.js"></script>
    </body>
</html>


简单演示
进入
删除

您似乎没有在选项中使用正确的键。你应该：

var entriesView = new EntriesView({
    collection: options.entry
});

顺便说一句，我的《愤怒的猫》教程有点过时了。要了解使用木偶视图的基本知识，最好阅读此免费pdf：（这是我的免费示例）

此外，您的模板选择器无效：您需要在有“输入模板”的地方有“#输入模板”。

当我进行更改时，您建议我出现此错误-未捕获的NoTemplateError:找不到模板：“输入模板”。您的更改是否意味着我也应该更改模板？谢谢你提供了这本书的链接，我搜索了一本木偶书，但什么也没有得到。我更新了我的答案：你的模板选择器丢失了“#”