Question

在下面的脚本中是使用Backbone.js构建的各种路由以及视图和路由事件为什么，除了最后一个'产品'之外，所有路线都按预期工作。

我最初认为这是一个非常不同的功能，但意识到它并没有被解雇，但即使是其他视图和路线的副本也不会有效。

任何人都知道为什么？谢谢你！

我也是Backbone的新手。富

<!doctype html>
    <html>
        <head>
            <title>Undie Couture by Lauren Copeland</title>
            <link type="text/css" rel="stylesheet" href="/assets/css/museosans_500_macroman/stylesheet.css" />
            <link type="text/css" rel="stylesheet" href="/assets/css/bootstrap/bootstrap.css" />
            <link type="text/css" rel="stylesheet" href="/assets/css/site/front-styles.css" />
        </head>
        <body>
            <div id="wrapper">
                <div class="content">
                    <header>
                        <div class="container">
                            <div id="logo"></div>
                            <nav>
                                <ul>
                                    <li><a href="/#/products/">shop</a></li>
                                    <li><a href="/#/contact">contact</a></li>
                                    <li><a href="/#/about">about</a></li>
                                    <li><a href="/#/wholesale">wholesale</a></li>
                                </nav>
                            </nav>
                        </div>
                    </header>
                    <div class="container">
                        <div class="page" id="first" style="display:none;"></div>
                        <div class="page"></div>
                    </div>
                </div>
            </div>
        </body>
        <script type="text/template" id="title-temp">
            <%= title %>
        </script>
        <script type="text/template" id="logo-temp">
            <a href="/#/home" id="logo"><img src="/assets/img/logo-strip.png" /></a>
        </script>
        <script type="text/template" id="home-temp">
            <%= title %>
        </script>
        <script type="text/template" id="page-temp">
            <h1><%= page.pluck('title') %></h1>
            <div id="body">
               <%= page.pluck('body') %>
            </div>
        </script>
        <script type="text/template" id="product-temp">
            <h1><%= page.pluck('name') %></h1>
            <div id="body">
                <%= page.pluck('description') %>
            </div>
        </script>

        <script type="text/javascript" src="/assets/js/libs/jquery/jquery.js">    </script>
        <script type="text/javascript" src="/assets/js/libs/underscore/underscore.js"></script>
        <script type="text/javascript" src="/assets/js/libs/backbone/backbone-min.js"></script>
        <script type="text/javascript" src="/assets/js/libs/bootstrap/bootstrap.js"></script>


<script type = "text/javascript">

var Router = Backbone.Router.extend({
    routes: {
        "home": "home",
        "about": "about",
        "contact": "contact",
        "wholesale": "wholesale",
        "products": "products"
    }
});
var Page = Backbone.Model.extend({
    initialize: function() {
        console.log('Page model loaded');
    },
    defaults: {
        "id": "",
        "title": "",
        "body": "",
        "slug": ""
    },
    urlRoot: '/backbone/page'
});

var Pages = Backbone.Collection.extend({
    initialize: function() {
        console.log('pages collection loaded');
    },
    url: '/backbone/page'
});


var HomeView = Backbone.View.extend({
    template: $('#standard').html(),
    el: '.page:first',
    change: function() {
        $('.page').fadeOut('slow');
    },
    render: function() {
        logo = $('#logo-temp').html();
        $('#logo').html(logo);
        $('.content').attr('id', 'home');
        var that = this;
        that.change();
        compiled = _.template($('#home-temp').html(), {
            title: ''
        });
        that.$el.html(compiled);
    }
});

var AboutView = Backbone.View.extend({
    template: $('#standard').html(),
    el: '.page:first',
    change: function() {},
    render: function() {
        console.log('render')
        var that = this;
        logo = $('#logo-temp').html();
        $('#logo').html(logo);
        $('.content').attr('id', 'about');
        aboutPage = new Pages();
        aboutPage.fetch({
            data: {
                id: 3
            },
            success: function() {
                $('#first').fadeOut({
                    duration: 400,
                    complete: function() {
                        console.log(aboutPage.models)
                        compiled = _.template($('#page-temp').html(), {
                            page: aboutPage
                        });
                        that.$el.html(compiled).delay(300).fadeIn();
                    }
                });
            }
        });
    }
});

var ContactView = Backbone.View.extend({
    template: $('#standard').html(),
    el: '.page:first',
    change: function() {
        $('.page').fadeOut();
    },
    render: function() {
        var that = this;
        logo = $('#logo-temp').html();
        $('#logo').html(logo);
        $('.content').attr('id', 'contact');
        contactPage = new Pages();
        contactPage.fetch({
            data: {
                id: 2
            },
            success: function() {
                $('#first').fadeOut({
                    duration: 400,
                    complete: function() {
                        console.log(contactPage.models)
                        compiled = _.template($('#page-temp').html(), {
                            page: contactPage
                        });
                        that.$el.html(compiled).delay(300).fadeIn();
                    }
                });
            }
        });
    }
});

var WholesaleView = Backbone.View.extend({
    template: $('#standard').html(),
    el: '.page:first',
    change: function() {},
    render: function() {
        console.log('render')
        var that = this;
        logo = $('#logo-temp').html();
        $('#logo').html(logo);
        $('.content').attr('id', 'about');
        wholePage = new Pages();
        wholePage.fetch({
            data: {
                id: 4
            },
            success: function() {
                $('#first').fadeOut({
                    duration: 400,
                    complete: function() {
                        console.log(wholePage.models)
                        compiled = _.template($('#page-temp').html(), {
                            page: wholePage
                        });
                        that.$el.html(compiled).delay(300).fadeIn();
                    }
                });
            }
        });
    }
});

var ProductView = Backbone.View.extend({
    template: $('#standard').html(),
    el: '.page:first',
    change: function() {},
    render: function() {
        var that = this;
        logo = $('#logo-temp').html();
        $('#logo').html(logo);
        $('.content').attr('id', 'about');
        wholePage = new Pages();
        wholePage.fetch({
            data: {
                id: 4
            },
            success: function() {
                $('#first').fadeOut({
                    duration: 400,
                    complete: function() {
                        console.log(wholePage.models)
                        compiled = _.template($('#page-temp').html(), {
                            page: wholePage
                        });
                        that.$el.html(compiled).delay(300).fadeIn();
                    }
                });
            }
        });
    }
});

var router = new Router();

var page_model = new Page();

var page_col = new Pages();

var home = new HomeView();

var about = new AboutView();

var contact = new ContactView();

var wholesale = new WholesaleView();

var products = new ProductView();

router.on('route:home', function() {
    home.render();
});

router.on('route:about', function() {
    about.render();
});

router.on('route:contact', function() {
    contact.render();
});

router.on('route:wholesale', function() {
    wholesale.render();
});

router.on('route:products', function() {
    products.render();
});


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

Answer 1

商店的锚标记有一个尾随/

<a href="/#/products/">

应该是

<a href="/#/products">

删除使路线适合我。

为什么除了1 Route之外的所有路由都使用Backbone Router

1 个答案: