Exploring the intricacies of backbone data modeling: mastering the art of data

Greetings everyone, I am delving into the world of Backbone and JavaScript. My data.json file is structured as follows:

{
"locations":
[
  {address:"2222", town:"Dallas"},{address:'3333', town:"Houston"},{}....
],

"items":
[
  {title:"shirt", price:20},{title:"shorts", price:10},{}....
]
}

I am using jQuery Mobile to populate two distinct Listviews.


For this purpose, I have created separate Backbone models for location and item entities

Item = Backbone.Model.extend({

     default:
     {
             title:"",
         price:""
     }
});

Address = Backbone.Model.extend({

     default:
     {
         address:"",
         town:""
     }
});

In addition, I have established Address and Item collections in the following manner

Items = Backbone.Collection.extend({
   defaults: {
            model: Item
             }
});

Addresses = Backbone.Collection.extend({
   defaults: {
            model: Address
             }
});

Now, my question is how do I structure my Store model to include both address and item collections. I presume it would look something like this:

Store = Backbone.Model.extend({
    addresses:[],
    items:[],
    url:"data.json"
});

Furthermore, could someone guide me on how to display the list view once the data has been fetched? Thank you!

Answer №1

To enhance Store functionality, you have the option to implement a parse method within it ():

Store = Backbone.Model.extend({
    addresses: [],
    items: [],
    url: 'data.json'
    parse: function(response) {
        this.addresses = new Addresses(response.locations);
        this.items = new Items(response.items);
        return response;
    }
});

Another approach could involve adding a listener for "reset" in an initialize function. However, if data fetching is already part of your process, using parse may be more convenient.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to make my script submit two forms consecutively?

On my website, I have two pages, each with a form. When you submit the first form on the first page, you are redirected to the second page with the second form. How can I submit both forms using a single Greasemonkey script? Here is a step-by-step guide: ...

Seeking a way to keep the returned Ajax string consistent and prevent it from fading away after page transition

I have a form that appears when the user clicks on the "Edit" link, allowing them to input their profile information. Upon submission, the data is processed via Ajax and saved in an SQL database using a PHP script. After saving the new profile, I would lik ...

Controlling the behavior of React components in response to updates

I'm currently learning ReactJs and utilizing the ExtReact framework for my project. I have successfully implemented a grid with pagination, which is functioning well. I customized the spinner that appears during data loading and it works as expected ...

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

Rearrange the li elements within multiple ul lists using JavaScript

Is there a way to reorder multiple ul-lists on my website using JavaScript? An example of the lists may be as follows: $(document).ready(function() { var ul = $('ul.filelist'); for (let u = 0; u < ul.length; u++) { const element = ul[ ...

Encountered an error while parsing a module in React: Unexpected token

After deciding to incorporate the npm package react-radio-buttons into my project, I encountered an error upon installation and implementation in my component: ./node_modules/react-radio-buttons/index.jsx 80:6 module parse failed: Unexpected token (80:6) ...

Efficiently run multiple Node-written apps on a single server

I currently have a single VPS and would like to host multiple node.js apps on it, similar to how Apache or Nginx works. I am using Nginx as a proxy, but I have concerns. As you know, one of the key features of Node.js is its non-blocking I/O and sing ...

Hide the scrollbar on an iframe

I have been trying to modify the attributes of an iframe using javascript in the following way: var iFrame = window.top.document.getElementById('window_content'); iFrame.setAttribute("height","63"); iFrame.setAttribute("scrolling","no") ...

Why doesn't jQuery ajax work when sourcing the URL from a variable but works with a hard-coded URL?

During my experimentation with setting and getting the URL for a jQuery Ajax (post) call, I realized the value of dynamically setting the destination URL for the request. Here's how I attempted to achieve this: To set the URL to 'store.php' ...

The setAttribute method does not function with getElementByClass()

Can someone please help me understand why this code is not working for me: document.getElementByClass('home1').setAttribute('style', 'background-image:url(img/red_menu.PNG);'); I have confirmed that I do indeed have an eleme ...

Obtain the data of the highlighted row in a telerik grid directly from the client side

I am attempting to retrieve the value of a GridBoundColumn with DataField="id" using JavaScript on the client side. When the user clicks on the image button within a row, I need to extract the id for that specific row and then invoke a web method by passin ...

Is there a way to efficiently distribute a function amongst controllers?

Being relatively new to angularjs, I am seeking advice on the best practice for tackling a specific issue. In my controller1, there is a validation function used for registration form validation that is invoked from my uniqueField directive as an attribute ...

Here's how to use the useState hook directly in your React components without

Currently, I am using the code snippet below to import useState: import * as React from 'react' import {useState} from 'react' I wanted to see if there is a way to condense this into one line, so I attempted the following: import * a ...

Looking for assistance with customizing my jQuery input styling

Check out this simplified version of the code: $(document).ready(function() { var $checkbox = $('input[type="checkbox"]'); $checkbox.wrap('<div class="stylecheck-container" style="display: inline" />').addClass('style ...

Executing JavaScript after uploading a file using Kendo Upload and Form in MVC

Currently, I am faced with a challenge while trying to submit a form that includes a List of files as one of its properties. Upon successful completion of the ActionResult, I need to display a success message using Javascript. When I utilize Ajax.Begin f ...

Using the onKeyUp and onKeyDown functions to detect when the spacebar key is pressed

Is there a way for my function to be triggered by either clicking a button or pressing the spacebar? I have managed to make it work partially, but it's not quite right. This is the function in question: const showText = () => { const x = Toug ...

Incorporate a Selectable Class when selecting a cell in a table

I have a single HTML table. <table id="tbl_1"> <tr> <td>ABCD</td> <td>ABCD</td> </tr> <tr> <td>ABCD</td> <td>ABCD</td> </tr> < ...

Is it crucial to invoke $ionicPlatform ready each time?

After noticing that $ionicPlatform.ready function is automatically executed in the app.js file generated by Ionic (within module.run), I pondered: Do I need to manually trigger $ionicPlatform.ready in controllers utilizing Cordova plugins which rely on on ...

Error encountered: Attempting to spread non-iterable object, resulting in an invalid action

Whenever I attempt to add an item to the cart, I encounter this error. Unhandled Runtime Error. TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. import { creat ...

My CSS files are not being included by grunt-bower-install

As someone who is relatively new to bower and grunt, I'm struggling with some basic tasks. After running bower install --save bootstrap, my goal is to use grunt-bower-install to update my js & css files as per the instructions on their documentat ...