Mastering Backbone - Incorporating JSON information with backbone

Question

Mastering Backbone - Incorporating JSON information with backbone

I am currently in the initial stages of transitioning my application to the backbone framework.

One of the tasks involves handling data that is fetched as JSON from an ajax call.

{f1:"f1_value", f2:"f2_value", f3:"f3_value"},
{f1:"f1_value", f2:"f2_value", f3:"f3_value"},
{f1:"f1_value", f2:"f2_value", f3:"f3_value"},

This dataset always consists of 3 columns but can vary in the number of rows.

Once processed client-side into HTML, this data is used to populate a dynamic div, which can extend as needed. Each data chunk is intended to represent a single view within the framework.

<div id = "data_hold"></div>

How can I integrate this data into the framework?

    var ModelTest,
        CollectionTest,
        ViewTest;

    ModelTest = Backbone.Model.extend({
    });
    CollectionTest = Backbone.Collection.extend({
        model: ModelTest
    }
    ViewTest = Backbone.View.extend({
    });

javascript json backbone.js

Answer 1

Answer №1

Mastering Backbone Basics:

var User,
    Task,
    ProjectView;

User = Backbone.Model.extend({ });

// Set the URL for the collection. It can be passed as an option in the
// Collection's initialize function instead of being static.

Task = Backbone.Collection.extend({
    model: User,
    url: 'http://localhost/my_json_source'
});

ProjectView = Backbone.View.extend({
    // Specify the target element for rendering. It can be an existing 
    // element or dynamically generated and attached to the DOM.
    el: $('#data_hold'),

    // Call the local render method when the collection is updated.

    initialize: function(options) { 
        this.collection.bind('reset', _.bind(this.render, this));
    },

    // Clear the element and append rows of the collection as paragraphs.
    // Use '_this = this' to access the View's context within each().

    render: function() {
        var _this = this;
        this.$el.html('');
        this.collection.each(function(item) {
            _this.$el.append('<p>' + item.get('name') + '</p>');
            });
    }
});

// Initialize the collection and view, then fetch the collection to trigger 
// rendering after it's updated.

$(function() {
    taskCollection = new Task();
    projectView = new ProjectView({collection: taskCollection});
    taskCollection.fetch();
});

Answer 2

Mastering Backbone Basics:

var User,
    Task,
    ProjectView;

User = Backbone.Model.extend({ });

// Set the URL for the collection. It can be passed as an option in the
// Collection's initialize function instead of being static.

Task = Backbone.Collection.extend({
    model: User,
    url: 'http://localhost/my_json_source'
});

ProjectView = Backbone.View.extend({
    // Specify the target element for rendering. It can be an existing 
    // element or dynamically generated and attached to the DOM.
    el: $('#data_hold'),

    // Call the local render method when the collection is updated.

    initialize: function(options) { 
        this.collection.bind('reset', _.bind(this.render, this));
    },

    // Clear the element and append rows of the collection as paragraphs.
    // Use '_this = this' to access the View's context within each().

    render: function() {
        var _this = this;
        this.$el.html('');
        this.collection.each(function(item) {
            _this.$el.append('<p>' + item.get('name') + '</p>');
            });
    }
});

// Initialize the collection and view, then fetch the collection to trigger 
// rendering after it's updated.

$(function() {
    taskCollection = new Task();
    projectView = new ProjectView({collection: taskCollection});
    taskCollection.fetch();
});

Mastering Backbone - Incorporating JSON information with backbone

Answer №1

Similar questions

Extracting multiline value from a textarea using JavaScript

Long taps do not activate the context menu in the mobile interface, as noted in the Google Maps API

Unlock the secrets of recovering deleted data from a text area in Kendo UI Angular

Obtaining a subset of data from firebase

navigation bar: retain link hover state even after displaying sub-menu

What is the best way to sum the numbers in this code snippet?

When collapsing an accordion, Bootstrap radio buttons fail to properly select

building CharFields dynamically in Django

Ways to arrange the JSON array by keys in reverse order utilizing Angular

Unexpected issue encountered for identifiers beginning with a numerical digit

What is the reason behind JavaScript libraries opting for a structure of [{ }] when using JSON?

Unraveling a nested JSON structure and converting it into a List of Objects using Circe in Scala

Unleashing the power of Vuex with promise chaining

Sending data from an external input field to a form using AngularJS programmatically with element name

Incorporating Vuetify into a Vue CLI application with the help of webpack

Trigger the fire controller code upon the change of the textbox date in ASP.NET MVC

I find myself a little mixed up with this syntax in JavaScript: `arr.indexOf(searchElement[, fromIndex])`

Creating a series of promises in a structured chain

The useCallback hooks persist outdated values when the list is refreshed

The function cannot be invoked. The 'Boolean' type does not have any call signatures. An error has occurred in the computed property of Vue3