个人中心
gpt4 book ai didi

javascript - 为什么除了 1 条路由之外的所有路由都与 Backbone 路由器一起使用

转载 作者：行者123 更新时间：2023-12-02 18:55:49 27 4
gpt4 key购买 nike

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

我最初将它作为一个非常不同的功能，但意识到它没有启动，但即使作为其他 View 和路线的重复，它仍然无法工作。

有人知道为什么吗？谢谢你!

我对 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>

最佳答案

您的商店 anchor 标记尾随有/

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

应该是

<a href="/#/products">

删除它使这条路线对我有用。

关于javascript - 为什么除了 1 条路由之外的所有路由都与 Backbone 路由器一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15369503/

27 4 0
文章推荐： javascript - 使用geoxml3显示多边形kml文件
文章推荐： javascript - iframe加载后隐藏链接
文章推荐： javascript - 我如何检查已经请求的ajax数据？
文章推荐： javascript - Mootools 不工作后注入(inject)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com