Question

I am trying to set up a show page for a Post that is accessed via a link:

<a class="post-link button" href="#">details</a>

When the post item is rendered, it is given an href like so:

this.$('a').attr('href', this.postUrl());

...

postUrl: function() {
  return "#posts/" + this.model.get('id');
}

When the fields are rendered, the links show up as:

http://[path_to_app]/#posts/[whatever_id]

When I click the link, then it should hit this router:

routes: {
  ''          : 'index',
  'new'       : 'newPost',
  "posts/:id" : 'show'
}

But I get this error, and it never goes in to the show function at all:

Uncaught Error: Syntax error, unrecognized expression: /1 jquery.js:4268
  Sizzle.errorjquery.js:4268
  Sizzle.filterjquery.js:4254
  Sizzlejquery.js:4044
  Sizzlejquery.js:5176
  jQuery.fn.extend.findjquery.js:5432
  jQuery.fn.jQuery.initjquery.js:188
  jQueryjquery.js:28
  hashchangetabs.js:9
  jQuery.event.dispatchjquery.js:3333
  jQuery.event.add.elemData.handle.eventHandle

When I change the link to be “#post/” + id and the route to “post/:id”, then this error does not occur.

I am in the process of learning Backbone, and could really use a hand here. Also of note: my routes root to posts#index action.

EDIT (more relevant code):

# Model
[APP].Models.Post = Backbone.Model.extend({
  urlRoot: '/posts'
});

#Router
[APP].Routers.Posts = Support.SwappingRouter.extend({
  initialize: function(options) {
    this.el = $('#posts');
    this.collection = options.collection;
  },

  routes: {
    ''          : 'index',
    'new'       : 'newPost',
    "posts/:id" : 'show'
  },

  index: function() {
    var view = new [APP].Views.PostsIndex({ collection: this.collection });
    this.swap(view);
  },

  newPost: function() {
    var view = new [APP].Views.PostsNew({ collection: this.collection });
    this.swap(view);
  },

  show: function(postId) {
    var post = this.collection.get(postId);
    var postsRouter = this;
    post.fetch({
      success: function() {
        var view = new [APP].Views.PostShow({ model: post });
        postsRouter.swap(view);
      }
    });
  }
});

#Post Item View
[APP].Views.PostItem = Backbone.View.extend({
  tagName: 'tr',

  initialize: function() {
    _.bindAll(this, 'render');
  },

  render: function () {
    this.$el.attr('id', 'post_' + this.model.id);
    this.$el.html(JST['posts/item']({ post: this.model }));
    this.renderFormContents();
    return this;
  },

  renderFormContents: function() {
    ...
    this.$('a').attr('href', this.postUrl());
  },

  postUrl: function() {
    return "#posts/" + this.model.get('id');
  }
});

Answer 1

Somewhere, someway, somehow, this issue was being caused by files not being loaded in a certain order. I wish I could be more specific, but I was not loading in backbone.min.js in the right place.

I was able to have some functionality, though, because I had included an old backbone partial file that I tried to customize, broken, and thought was deleted.

Really, really stupid mistake that I could not figure out for a little while. Thanks for all of your help.