Question

我尝试使用下划线模板和主干创建一个简单的应用（如this article中所述）。我确定模板文件正确加载，但我不确定我是否正确地将模型应用于模板。（见下面的例子）

我还检查了compiledTemplate变量的输出，但它只包含<h1> </h1>标记，所以看起来我的模型格式可能有问题。但到目前为止我还没能找到任何解决办法，因此我在这里发帖，希望有人可以帮我解决这个问题。

index.html

<head>
    <script src="./dev_env/app/libs/vendor/require.min.js" data-main="dev_env/app/main"></script>
    <script>
        require(['app_init']);
    </script>
</head>
<body >

        <div id="test">
        </div>

</body>
</html>

./模板/ template.html

<h1> <%= obj.title  %> </h1>

./ app_init.js

require([ '../app' ], function(App){
  App.initialize();
});

./ app.js

define([ 'backbone', './router', 'underscore','jquery'], function (Backbone, Router, _,  $) {
          var initialize = function(){
            Router.initialize();
          }

          return {
            initialize: initialize
          };
    });

./模型/ model_menu.js

define([ 'underscore',  'backbone' ], function(_, Backbone){
  var MenuModel = Backbone.Model.extend({
    defaults: {
      title: "Test1"
    }
  });

  return MenuModel;
});

./集合/ collection_menu.js

define([ 'underscore',  'backbone',  'models/model_menu'
], function(_, Backbone, MenuModel){
  var MenuCollection = Backbone.Collection.extend({
    model: MenuModel
  });

  return MenuCollection;
});

./ router.js

define(['jquery','underscore', 'backbone', 'views/menu/view_menu'],  function ($, _, Backbone, vMenu) {
    var AppRouter = Backbone.Router.extend({
            routes : {
                'menu' : 'showMenu',

            }
        });

    var initialize = function () {
        var app_router = new AppRouter;
        app_router.on('route:showMenu', function () {
            var MyMenu = new vMenu();
            MyMenu.render();
        });

        Backbone.history.start();
    };
    return {
        initialize : initialize
    };
});

./视图/ menu_view / view_menu.js

define([ 'jquery','underscore', 'backbone', 'collections/collection_menu', 'text!templates/template.html' ], function ($, _, Backbone, MenuCollection,  myTempl) {
    var MenuViiew = Backbone.View.extend({
        el : $('#test'),
        initialize : function () {
            this.collection = new MenuCollection();
            this.collection.add( {title: "Title2"});

            var compiledTemplate = _.template( myTempl, { obj : this.collection.models} );
            this.$el.html(compiledTemplate);
        }
    });

    return MenuViiew;
});

Answer 1

我现在明白我错在哪里，我误解了一个集合是什么，因此我无法使其发挥作用。为此道歉，但我还在学习这些东西。

这是解决方案：

顺便说一句。我已将 collection_menu 更改为 menu_collections ，因此很清楚该文件包含一系列菜单模型。

<强>视图/ view_model.js

define([ 'jquery','underscore', 'backbone', 'collections/menu_collections', 'text!templates/template.html' ], function ($, _, Backbone, MenuCollections, myTempl) {
    var MenuViiew = Backbone.View.extend({
        el : $('#alex'),

        initialize : function () {
            this.collection = new MenusCollection()
            this.collection.add({ title: "Test1" });
            this.collection.add({ title: "Test2" });
        },
        render: function(){
            var compiledTemplate = _.template(myTempl, { menus : this.collection.models});
            this.$el.html(compiledTemplate);
        }
    });

    return MenuViiew;
});

<强> ./模板/ template.html

<% _.each(menus, function(menu) { %>
    <h1> <%= menu.get('title')  %> </h1>
<% }); %>

在Backbone和Require.js中使用下划线模板

1 个答案: