在Backbonejs中更新集合和视图

Question

I've created a search bar, but when the data is gathered from the user, it displays the default data over again rather then the users new search criteria.

I'm resetting the collection and giving it a new URL when the user searches, but it doesn't seem to update correctly, and I'm having trouble figuring out where my problem(s) are.

(function(){
    'use strict';
    var red = red || {};

    //model////////////////////////////////////////////////

    red.RedditModel = Backbone.Model.extend({
        defaults: {
            urlTarget: $('#textBox').val(),
            urlStart: 'https://www.reddit.com/r/',
            urlEnd: '.json'
        },

        initialize: function() {

            this.on('change:urlTarget', function() {
                console.log('The Url Target has changed to ' + this.get("urlTarget"));
            });

            this.on('change:concatURL', function() {
                console.log('The model Url has changed to ' + this.get("concatURL"));
            });

            this.on('change:url', function() {
                console.log('The collection url has changed to: ' + this.get('url'));
            });

        }
    });
    var redditModel = new red.RedditModel();

    var fullURL = new red.RedditModel({

        concatURL: redditModel.attributes.urlStart + redditModel.attributes.urlTarget + redditModel.attributes.urlEnd
    });

    var listElmement,
        $list = $('.list');

    //collections//////////////////////////////////////////
    red.redditCollection = Backbone.Collection.extend({
        model: red.RedditModel,
        url: fullURL.attributes.concatURL,
        parse: function(response) {
            var redditData = response.data.children;
            return redditData;
        }
    });

    //view////////////////////////////////////

    red.RedditView = Backbone.View.extend({
        model: fullURL,
        collection: redditCollection,
        el: '.searchBar',
        events: {

            'click .searchButton': function(e) {
                this.updateModel(e);
                this.updateCollection(e);
            },
            'change #textBox': 'initialize'
        },

        updateModel: function() {
            this.$urlTarget = $('#textBox').val()
            this.model.set('urlTarget', this.$urlTarget);
            this.model.set('concatURL', redditModel.attributes.urlStart + this.$urlTarget + redditModel.attributes.urlEnd);
        },

        updateCollection: function() {
            this.collection.reset();
            this.$urlTarget = $('#textBox').val();
            var newUrl = redditModel.attributes.urlStart + this.$urlTarget + redditModel.attributes.urlEnd;
            this.collection.add({ urlTarget: this.$urlTarget });
            this.collection.add({ url: newUrl });
            console.log(newUrl);
        },

        tagName: 'li',
        className: 'listItems',

        initialize: function() {
            $list.html('');
            this.collection.fetch({
                success: function(redditData) {
                    redditData.each(function(redditData) {
                        redditData = redditData.attributes.data.title

                        listElmement = $('<li></li>').text(redditData);
                        $list.append(listElmement);

                    })
                }
            });
        },
        render: function() {

        }
    });

    var redditCollection = new red.redditCollection({
        redditModel,
        fullURL
    });

    var myRedditView = new red.RedditView({
        model: redditModel,
        collection: redditCollection
    });


    $('.page').html(myRedditView.render());;

})();

Answer 1

Parse within the model, and use it for its intended purpose. No need to store the reddit url and other search related info in a model.

red.RedditModel = Backbone.Model.extend({
    parse: function(data) {
        return data.data;
    },
})

Since you already take care of the reddit url here. Don't be afraid to make yourself some utility functions and getters/setters in your Backbone extended objects (views, model, collection, etc).

red.RedditCollection = Backbone.Collection.extend({
    url: function() {
        return 'https://www.reddit.com/r/' + this.target + this.extension;
    },

    initialize: function(models, options) {
        this.extension = '.json'; // default extension
    },

    setExtension: function(ext) {
        this.extension = ext;
    },
    setTarget: function(target) {
        this.target = target;
    },

    parse: function(response) {
        return response.data.children;
    }
});

Don't be afraid to have a lot of views, Backbone views should be used to wrap small component logic.

So here's the item:

red.RedditItem = Backbone.View.extend({
    tagName: 'li',
    className: 'listItems',
    render: function() {
        this.$el.text(this.model.get('title'));
        return this;
    }
});

Which is used by the list:

red.RedditList = Backbone.View.extend({
    tagName: 'ul',
    initialize: function() {
        this.listenTo(this.collection, 'sync', this.render);
    },
    render: function() {
        this.$el.empty();
        this.collection.each(this.renderItem, this);
        return this;
    },
    renderItem: function(model) {
        var view = new red.RedditItem({ model: model });
        this.$el.append(view.render().el);
    }

});

And the list is just a sub-component (sub-view) of our root view.

red.RedditView = Backbone.View.extend({
    el: '.searchBar',
    events: {
        'click .searchButton': 'onSearchClick',
    },

    initialize: function() {
        // cache the jQuery element for the textbox
        this.$target = $('#textBox');

        this.collection = new red.RedditCollection();

        this.list = new red.RedditList({
            collection: this.collection,
            // assuming '.list' is within '.searchBar', and it should
            el: this.$('.list'),
        });
    },
    render: function() {
        this.list.render();
        return this;
    },

    onSearchClick: function(e) {
        this.collection.setTarget(this.$target.val());
        console.log(this.collection.url());
        this.collection.fetch({ reset: true });
    },

});

Then, you only need the following to use it:

var myRedditView = new red.RedditView();
myRedditView.render();

Notice the almost non-existent use of the global jQuery selector. If you're using Backbone and everywhere you're using $('#my-element') , you're defeating the purpose of Backbone which is, in part, to apply MVC concepts on top of jQuery.

Some notes on the code posted

Take time to understand what's going on. There are several lines of code in your question that doesn't do anything, or just don't work at all.

---

Though it's been removed in your answer, the following doesn't make sense because the collection constructor is Backbone.Collection([models], [options]) and what you have here translates to passing an options object (using ES6 shorthand property names { a, b, c} ) to the models parameter.

var redditCollection = new red.redditCollection({
    redditModel,
    fullURL
});

---

This line does nothing, because .render() doesn't do anything and doesn't return anything.

$('.page').html(myRedditView.render());

---

Here, you're creating a new element manually using jQuery while you have Backbone which does this for you.

$('<li></li>').text(redditData);

---

Don't use the attributes directly, always use .get('attributeKey') unless you have a good reason not to.

redditModel.attributes.urlStart

---

Favor local variables whenever you can. The listElement var here is defined at the "app" level without a need for it.

listElmement = $('<li></li>').text(redditData);
$list.append(listElmement);

---

A Backbone collection is automatically filled with the new instances of models on success. You do not need to re-parse that in the success callback (in addition to the ambiguity with redditData ).

this.collection.fetch({
    success: function(redditData) {
        redditData.each(function(redditData) {
            redditData = redditData.attributes.data.title;

---

I don't mean to be rude and I took the time to write that long answer to try to help, you, and any future reader that comes by.