个人中心
gpt4 book ai didi

javascript - backbone.js路由问题

转载 作者：行者123 更新时间：2023-12-02 19:11:14 26 4
gpt4 key购买 nike

我对 js 和backbone.js 非常陌生，我向你保证我已经在文档和这里进行了广泛的搜索。我正在尝试构建一个显示照片(最终是其他内容)的简单网站，并且我希望能够单击照片以查看带有另一个 View /模板的不同“页面”。我似乎无法让它工作，现在我在路由器的 photoById 方法中收到“未捕获的类型错误:无法调用未定义的方法'get'”。下面的代码...谢谢!

//------ main.js

var photoListTemplate = Handlebars.compile($('#photo-list-template').html());
var photoTemplate = Handlebars.compile($('#photo-template').html());
var navTemplate = Handlebars.compile($('#navigation-template').html());

var Photo = Backbone.Model.extend({
  defaults: function() {
    return {

    };
  },
  initialize: function(options) {

  }
});
var PhotoCollection = Backbone.Collection.extend({
    model: Photo
});

var PhotoView = Backbone.View.extend({
    events: {

    },

    //tagName: 'td',
    className: 'photo',
    template: photoTemplate,

    initialize: function(options) {
        _.bindAll(this, 'render');
        this.model.on('change', this.render);
    },
    render: function() {
        $(this.el).empty().append(this.template(this.model.toJSON()));
        return this;
    }
});

var PhotoCollectionView = Backbone.View.extend({
    tagName: 'table',
    className: 'photo-list',
    template: photoListTemplate,
    events: {

    },
    initialize: function(options) {
        this.collection.on('add remove', this.render, this);
    },
    render: function() {
        $(this.el).empty();
        this.collection.each(function(photo){
            $(this.el).append(new PhotoView({model: photo}).render().el);
        }, this);
        return this;
    }
});

var PhotoRouter = Backbone.Router.extend({
    routes: {
        "": "list",
        "photo/:id": "photoById"
    },
    initialize: function(options) {

    },

    allPhotos: function() {
        this.photoList = new PhotoCollection();
        this.photoCollectionView = new PhotoCollectionView({collection: this.photoList});
        this.photList.fetch();
        $('#content').empty().append(this.photoCollectionView.render().el);
    },

    photoById: function(id){
        this.photo = this.photoList.get(id);
        this.photoView = new PhotoView({model: this.photo});
        $('#content').empty().append(this.photoView.render().el);
    }
});

var photos = null;
$.getJSON('http://localhost:3000/photos.json', function(response){
    photos = new PhotoCollection(response);
    $('#container').append(new PhotoCollectionView({collection: photos}).render().el);
    var photoRouter = new PhotoRouter();
    Backbone.history.start();
});

/-----index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <!-- <p>Replace Me! Replace Me!</p> -->

    <div class='container' id='container'>
    </div>

    <script type="text/x-handlebars-template" id='navigation-template'>
        <div class='navbar'>
            <div class='navbar-inner'>
                <a class='brand' href=#>ohayon</a>
                <ul class='nav'>

                </ul>
            </div>
        </div>
    </script>

    <script type="text/x-handlebars-template" id='photo-template'>
        <div class='lead'>
        <a href='#photo/{{id}}'>{{name}}</a>
        <img src='http://localhost:3000{{image.url}}' height='200' width='200'>
        </div>
    </script>

    <script type="text/x-handlebars-template" id='photo-list-template'>
        <div class='lead'>
        <a href='#photos/{{id}}'>{{name}}</a>
        <img src='http://localhost:3000{{image.url}}'>
        </div>
    </script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>

    <!-- If we want Boostrap components -->
    <script src="js/bootstrap.js"></script>

    <!-- Templating with Handlebars -->
    <script src="js/handlebars.js"></script>

    <!-- We Need Underscore.js -->
    <script src="js/underscore.js"></script>

    <!-- And Finally Backbone -->
    <script src="js/backbone.js"></script>

    <!-- Your Code goes here -->
    <script src="js/main.js"></script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
</body>
</html>

最佳答案

按照您的编码方式，无法保证当您尝试在 photoById 中使用 this.photoList 时，它已经被创建。您可能想在路由器的 init 函数中创建它:

initialize: function(options) {
    this.photoList = photos;
},

同时从 allPhotos 中删除几行 - 您不想重新创建 PhotoCollection 或调用 fetch，因为它是已在应用程序的第一步中创建并填充。应该看起来像这样:

allPhotos: function() {
    this.photoCollectionView = new PhotoCollectionView({collection: this.photoList});
    $('#content').empty().append(this.photoCollectionView.render().el);
},

(另一个问题，您有时使用容器，有时使用内容。)

It's running here. (我使用了一些虚拟数据进行测试。)

关于javascript - backbone.js路由问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13677802/

26 4 0
文章推荐： titanium - appcelerator 中的数据存储在哪里？
文章推荐： debugging - Docker 在 vagrant 中运行 + Pycharm 中的远程 python 调试
文章推荐： mysql - docker commit mysql 不保存
文章推荐： sql-server - SQL Server varbinary(max) 和 varchar(max) 数据位于单独的表中
行者123
个人简介

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

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