Home/ Questions/Q 8341149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T05:23:11+00:00

I am trying to create my first backbone app and am having some difficulty

  • 0

I am trying to create my first backbone app and am having some difficulty getting my head around how I am meant to be using views.

What I am trying to do is have a search input that each time its submitted it fetches a collection from the server. I want to have one view control the search input area and listen to events that happen there (a button click in my example) and another view with sub views for displaying the search results. with each new search just prepending the results into the search area.

the individual results will have other methods on them (such as looking up date or time that they where entered etc).

I have a model and collection defined like this:

SearchResult = Backbone.model.extend({
    defaults: {
        title: null,
        text: null
    }
});

SearchResults = Backbone.Collection.extend({
    model: SearchResult,
    initialize: function(query){
        this.query = query;
        this.fetch();
    },
    url: function() {
        return '/search/' + this.query()
    }
});

In my views I have one view that represents the search input are:

var SearchView = Backbone.View.extend({
    el: $('#search'),
    events: {
        'click button': 'doSearch' 
    },
    doSearch: function() {
        console.log('starting new search');
        var resultSet = new SearchResults($('input[type=text]', this.el).val());
        var resultSetView = new ResultView(resultSet); 
    }
});

var searchView = new SearchView();

var ResultSetView = Backbone.View.extend({
    el: $('#search'),
    initialize: function(resultSet) {
        this.collection = resultSet;
        this.render();
    },
    render: function() {
        _(this.collection.models).each(function(result) {
            var resultView = new ResultView({model:result});
        }, this);
    }
});

var ResultView = Backbone.view.extend({
     tagName: 'div',
     model: SearchResult,
     initialize: function() {
         this.render();
     },
     render: function(){ 
         $(this.el).append(this.model.get(title) + '<br>' + this.model.get('text'));
     }
});

and my html looks roughly like this:

<body>
<div id="search">
    <input type="text">
    <button>submit</button>
</div>
<div id="results">

</div>

</body>

In my code it gets as far as console.log('starting new search'); but no ajax calls are made to the server from the initialize method of the ResultSetView collection.

Am I designing this right or is there a better way to do this. I think because the two views bind to different dom elements I should not be instantiating one view from within another. Any advice is appreciated and if I need to state this clearer please let me know and I will do my best to rephrase the question.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Some problems (possibly not the only ones):

    • Your SearchView isn’t bound to the collection reset event; as written it’s going to attempt to render immediately, while the collection is still empty.
    • SearchView instantiates the single view ResultView when presumably it should instantiate the composite view ResultSetView.
    • You’re passing a parameter to the SearchResults collection’s constructor, but that’s not the correct way to use it. See the documentation on this point.
    • 0