How to populate model data from json file - json

Question

I currently have to code below and a static json file. However how can I set my model defaults to the data in the json file? My JSON file has a few pages - I want to be able to get defaults and set defaults.
var PageModel = Backbone.Model.extend({
initialize: function () {
console.log('initiliazed model');
},
url: "data/data.json",
defaults: function() {
return PageView.defaultsFromJSON;
}
});
var PageView = Backbone.View.extend ({
initialize: function () {
console.log('initiliazed view')
_.bindAll(this);
this.model.fetch();
this.render();
this.model.on('change',this.render);
},
el : '#ev-wrapper',
render: function () {
$('#ev-wrapper').append(Handlebars.compile($('#ev-template').html())(this.model.toJSON()));
$('.ev-asset-loader').fadeOut('slow', function (event) {
this.remove();
});
}
});
pageModel = new PageView({model: new PageModel()});
json file -
{
"page":[{
"id":"p05",
"title":"ptitle1",
"text":"pinitialtext"
},
{
"id":"p10",
"title":"ptitle2",
"text":"pinitialtext"
}]
}

Answer 1

Are you rendering the page with a server-side language ? If yes, inject a JSON string into the view containing your defaults, and fill your model with it.
var data = <?php echo $json ?>,
model = new PageModel(data),
view = new PageView({model: model, el : $('#ev-wrapper')[0]});
If you are not using a server-side language, I think you could issue an AJAX request with JQuery to load your JSON data, but this would be the same as calling fetch.
I can't see a way to "include" the JSON file another way.

Answer 2

I am trying to solve a similar problem (Populating Backbone models from a static JSON file for a demo).
I came across an example on the Backbone.Leaflet library:
https://github.com/LuizArmesto/backbone.leaflet/blob/master/examples/map.html
// This isn't the backbone way, but we want to keep this example
// as simple as possible.
$( '#render' ).click( function () {
geoCollection.reset( JSON.parse( $( '#geoJSON' ).val() ) );
});
In this example, the ID in question (#geoJSON) is a text area that houses the JSON the author (LuizArmesto) is trying to load into the model.
<textarea id="geoJSON">
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[-46.6155, -23.5023], [-46.6193, -23.5030], [-46.6247, -23.5073], [-46.6252, -23.5117], [-46.6218, -23.5115], [-46.6154, -23.5080], [-46.6150, -23.5037], [-46.6155, -23.5023]]]
},
"properties": {}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [[-46.6318, -23.4900], [-46.6256, -23.4916], [-46.6200, -23.4900], [-46.6100, -23.4900]]
},
"properties": {}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-46.6368, -23.5100]
},
"properties": {}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-46.6156, -23.5016]
},
"properties": {}
}
]
}
</textarea>
As stated in his comments, this isn't idiomatic of backbone (or "the backbone way"), but it works great for little side projects that don't need a server.