Question

我是backboneJs的新手并且遵循教程here。我正在为/ users创建一个路由，并在教程中执行相同的操作，但是找不到404，而在教程上它完美地工作。

我的代码：

<script>

    var Users = Backbone.Collection.extend({
        url: '/users'
    });

    var UserList = Backbone.View.extend({
        el: '.page',
        render: function() {
            var users = new Users();
            users.fetch({
                success: function(users) {
                    var tempalte = _.tempalte($('#user-list-template').html(), {users: users.models});
                    this.$el.html(template);
                }
            })
        }
    });

    var Router = Backbone.Router.extend({
        routes: {
            '': 'home'
        }
    });

    var userList = new UserList();

    var router = new Router();
    router.on('route:home', function() {
        userList.render();
    });

    Backbone.history.start();
</script>

HTML正文

<div class="container">
    <h1> User Manager </h1>
    <hr />
    <div class="page">

    </div>
</div>

<script type="text/template" id="user-list-template">
    <h1> Testing Template</h1>
</script>

和body还包含所有其他脚本。我确信我犯了一个错误但却无法找到它。请帮忙，谢谢！

Answer 1

视频代码可在此处进行比较：

index.html

我可以在发布的代码中看到一些语法错误，这些错误是问题的一部分。变量＆＃34; tempalte＆＃34;已创建，但＆＃34;模板＆＃34;传递给$ el.html（）。还有一个;在user.fetch（{}）

之后丢失

应该是这样的：

users.fetch({
  success: function(users) {
    var template = _.template($('#user-list-template').html(), {users: users.models});
    this.$el.html(template);
  }
});

Answer 2

看起来您在尝试获取用户列表时获得了404。您需要更改集合以包含完整的服务URL：

var Users = Backbone.Collection.extend({
    url: 'http://backbonejs-beginner.herokuapp.com/users'
});

另一个解决方案是使用ajaxPrefilter：

$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
    options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url;
});

BackboneJs：404 Not Found

2 个答案: