Question

I am trying to write some backbone.js stuff to get a better understanding on where and if it fits in better for me on projects. Any way I have a site and I am loading a collection with page content.

Json data comes back with (pid,name,title,content) on my router the default is

defaultRoute: function (actions)
{
    this.showInfo('food');
},
showInfo: function (id)
{
    var view = new ContentView({ model: this._items.at(id) });
    $(".active").removeClass("active");
    $("#" + id).addClass("active");
    view.render();
}

if I put a 0 in place of id in this “new ContentView({ model: this._items.at(0) })” I will get the first item in the collection and if I do this in the View:

    var ContentView = Backbone.View.extend({
    el: $('#content'),

    render: function ()
    {
        this.el.empty();
        $(this.el).append(this.model.attributes.content);
        return this;
    }
});

I get the content displayed perfectly but of course may not be the content I wanted

Is it possible to select from a collection based on name == “food”?? I dont want to have to map the content to id numbers defeats the purpose of storing in a db

Sorry if this seems like a foolish question but I have crawled all over looking and Im sure Im missing something simple

here is my full NavigationRouter code in case it helps

    var NavigationRouter = Backbone.Router.extend({
    _data: null,
    _items: null,
    _view: null,

    routes: {
        "p/:id": "showInfo",
        "*actions": "defaultRoute"
    },
    initialize: function (options)
    {
        var _this = this;
        $.ajax({
            url: "page_data.php",
            dataType: 'json',
            data: {},
            async: false,
            success: function (data)
            {
                _this._data = data;
                _this._items = new ItemCollection(data);
                _this._view.render();
                Backbone.history.loadUrl();
            }

        });

        return this;
    },
    defaultRoute: function (actions)
    {
        this.showInfo('home');
    },
    showInfo: function (id)
    {
        var view = new ContentView({ model: this._items.at(id) });
        $(".active").removeClass("active");
        $("#l_" + id).parent().addClass("active");
        view.render();
    }
});

Answer 1

Backbone mixes in a bunch of Underscore’s functions into its Collections.

So if you want to find the model in the collection where name === 'food', you can do:

var foodModel = this._items.find(function(model) {
  return model.get('name') === 'food';
});
// this will set foodModel to the first model whose name is 'food'

As a side note, you don’t need to call empty in your render function, which can just be:

render: function() {
  $(this.el).html(this.model.get('content'));
  return this;
}

jQuery’s html function just replaces the content of an element with the html string you pass in.