I have a collection calling a remote REST server and getting back a JSON object containing fields including arrays. My Model is being called on each iteration through the collection, and I can get one of the fields to render in my template. Here's where things get strange...
If I do the following in the template:
<%= name %>
I can get the name field to output. However, any other fields will not render, unless I create some defaults at the beginning of the Model thus:
defaults: {
name: '',
phone: '',
age: ''
}
So, if I include this, I can render those fields. Should I have to do that on a model to use it's fields?
... as requested by n8eil
Template:
<script type="text/template" id="pos-list-item">
<%= name %>, <%= description %>, <%= cost %>
</script>
JSON Object:
{
"itemCount": 3,
"items": [
{
"uri": "/item/1234",
"name": "Soda Drink",
"description": "A fizzy drink",
"price": [
{
"costType": "A",
"cost": 3.5
}
],
"live": true,
"created": "2013-10-07 18:22:29"
},
{
"uri": "/item/12345",
"name": "Choco bar",
"description": "A nice snack",
"price": [
{
"costType": "B"
"cost": 1.75
}
],
"live": true,
"created": "2013-10-07 18:22:29"
}
]
}
Changed some data for project privacy but this is essentially the layout of the JSON object. I need 'name', 'description' and 'cost' to appear in the template as above. I can log 'price' out to the console and it shows as an object but I cannot single out the 'cost' field...
http://jsbin.com/eHoPAri/1/edit?html,js,console,output
I went ahead and mocked up some Marionette structures for this data, not sure if they're close to what you're doing. The only thing I needed to change for the template was that 'cost' is inside an object inside the 'price' array, so you need to reference it by 'price[0].cost'. Otherwise no, you should not need default properties on a model in order for them to be rendered in the template, but you will get an error if you try to reference a property not found on the model.
You could also put in a method to add a 'cost' property to the model when it's loaded so you don't have to reference it from the array :
var itemModel = Backbone.Model.extend({
parse : function(response, options){
return _.extend(response, { 'cost' : response['price'][0]['cost'] })
}
});
Hope this helps
Yes, the field would have to exist when rendering that template. However, you could modify the template and not have to include defaults:
<%= name ? name : '' %>
Related
On a Category model I created, I have the following relation:
"subscriptions":
{
"type": "hasMany",
"model": "Subscription"
"foreignKey": "",
"options": { "nestRemoting": true } } }
How could I get the Count() result when running:
this.userService.getCategories(this.currentUser.id,
{include: {relation: 'subscriptions', scope: {type: 'count'}}})
.subscribe((data: any[]) => { this.categories = data };
I would like to count the number of subscription when getting the categories belonging to the user, in the same observable().
Like show above, I tried with the scope of type 'count'. nothing comes.
Thanks for any help.
As an answer:
Loopback provides the 'include' filter to be able to retrieve related models.
As a consequence an Observable is retrieved. It does contain the relationship.
Getting the Count() is as simple as writing {{category.subscriptions.length}}in the HTML.
Hope this helps.
I'm having some trouble accessing some nested data in one of my Ember models. Below is the JSON response...
{
"fields": {
"header": {
"name": "header",
"type": "text",
"localize": false,
"options": []
},
"body": {
"name": "body",
"type": "textarea",
"localize": false,
"options": []
}
},
"entries": [
{
"header": "header test",
"body": "body test body test body test",
"_mby": "5a395e8430c2ddoc683600766",
"_by": "5a395e8430c2ddoc683600766",
"_modified": 1513709605,
"_created": 1513709605,
"_id": "5a3960253d578doc735798511"
}
],
"total": 1
}
Here is my current serializer
import DS from 'ember-data';
export default DS.RESTSerializer.extend({
normalizeResponse(store, primaryModelClass, payload, id, requestType)
{
payload = {
entries: payload.entries
};
return this._super(store, primaryModelClass, payload, id, requestType);
}
});
I'm trying to get the Entries in my template. Perhaps I need some help better serializing this with NormalizeResponse? I'm very stumped so please share if you have any ideas!
Thanks!!
The ember-data RESTAdapter expects the JSON to contain keys that correspond to model names and values to be arrays of JSON objects with key-value pairs according to the respective models' attribute-name--attribute-value-type definitions*.
So if you have a model named entry containing header: attr('string'), body: attr('string'), the following JSON should lead to an entry in the store:
{
"entries": [{
"header": "header test",
"body": "body test body test body test",
"id": "5a3960253d578doc735798511"
}],
}
There is a way to convince ember-data to customize the id field name (to accept _id instead of id). The build-in pluralization rules should include the entry->entries pluralization (but I cannot vouch for it).
Any top-level key that does not correspond to a model name should be ignored anyway, so no need to filter it out manually (unless you have models named field or total).
If you then return this.store.findAll('entry') (or query('entry',{/*something*/}) in your route's model hook, you should be able to look over {{#each model as |entry|}} in your controller's template.
(It is good practice to not use model as the model name, but if you want it to be entries, you have to specify that explicitly somewhere, i.e. the controller or the route's setupController method.)
*The point of repeating the name of the model as top-level key in the json response (presumably to an API endpoint of the same name) is that you can include other models if you whish and they will be added to the store as well.
I'm building an adapter to wrap the Keen.io API, so far I've been able to successfully load the projects resource, however the returned object looks like this:
{
partners_url: "/3.0/projects/<ID>/partners",
name: "Project Name",
url: "/3.0/projects/<ID>",
saved_queries: [ ],
events_url: "/3.0/projects/<ID>/events",
id: "<ID>",
organization_id: "<ORG ID>",
queries_url: "/3.0/projects/<ID>/queries",
api_key: "<API KEY>",
events: [
{
url: "/3.0/projects/<ID>/events/user_signup",
name: "user_signup"
},
{
url: "/3.0/projects/<ID>/events/user_converted",
name: "user_converted"
},
{
url: "/3.0/projects/<ID>/events/user_created_project",
name: "user_created_project"
}
]
}
Excluding a lot of cruft, Ember has no trouble mapping the name and id attributes using the RESTSerializer, but if I add an events relation to my Project model it blows up with:
Error while loading route: TypeError: Cannot set property 'store' of undefined
at Ember.Object.extend.modelFor (http://localhost:3000/assets/ember-data.js?body=1:9813:23)
at Ember.Object.extend.recordForId (http://localhost:3000/assets/ember-data.js?body=1:9266:21)
at deserializeRecordId (http://localhost:3000/assets/ember-data.js?body=1:10197:27)
at deserializeRecordIds (http://localhost:3000/assets/ember-data.js?body=1:10211:9)
at http://localhost:3000/assets/ember-data.js?body=1:10177:11
at http://localhost:3000/assets/ember-data.js?body=1:8518:20
at http://localhost:3000/assets/ember.js?body=1:3404:16
at Object.OrderedSet.forEach (http://localhost:3000/assets/ember.js?body=1:3247:10)
at Object.Map.forEach (http://localhost:3000/assets/ember.js?body=1:3402:10)
at Function.Model.reopenClass.eachRelationship (http://localhost:3000/assets/ember-data.js?body=1:8517:42)
From my investigation this seems to be because it can't find the inverse relation to map an Event back to a Project because there's no parent ID.
Is it possible to create a relation in Ember Data to support this? Or is it possible to modify the Serializer to append a projectId to each event before loading?
I'm using Ember 1.5.0-beta.4 and Ember Data 1.0.0-beta.7+canary.f482da04.
Assuming your Project model is setup the following way:
App.Project = DS.Model.extend({
events: DS.hasMany('event');
});
You need to make sure that the JSON from your API is in a certain shape that Ember-Data expects.
{
"project": {
"id": 1,
"events": ["1", "2"],
},
"events": [{
"id": "1",
"name": "foo"
}, {
"id": "2",
"name": "bar"
}]
}
You can, however, implement extractArrayin your model's serializer to transform the JSON from the server into something similar like the above example.
There's a working example and an explanation in the Ember docs.
Here,I am trying to implement CRUD operations using ember-model.
I am totally new to ember environment,actually i don't have much understanding of ember-model.
Here,i am trying to add new product and delete existing one.I am using inner node of fixture
i.e. cart_items.My this fixture contains two node i.e. logged_in and cart_items and this what my fixture structure :
Astcart.Application.adapter = Ember.FixtureAdapter.create();
Astcart.Application.FIXTURES = [
{
"logged_in": {
"logged": true,
"username": "sachin",
"account_id": "4214"
},
"cart_items": [
{
"id": "1",
"name": "Samsung Galaxy Tab 2",
"qty": "1",
"price": "100",
"subtotal": "100"
},
{
"id": "2",
"name": "Samsung Galaxy Tab 2",
"qty": "1",
"price": "100",
"subtotal": "100"
},
{
"id": "3",
"name": "Samsung Galaxy Tab 2",
"qty": "1",
"price": "100",
"subtotal": "100"
}
]
}
];
I want to this fixture struture only to get data in one service call from server.
Now,here is my code which i am using to add and delete product from cart_items
Astcart.IndexRoute = Ember.Route.extend({
model: function() {
return Astcart.Application.find();
}
});
Astcart.IndexController = Ember.ArrayController.extend({
save: function(){
this.get('model').map(function(application) {
var new_cart_item = application.get('cart_items').create({name: this.get('newProductDesc'),qty: this.get('newProductQty'),price: this.get('newProductPrice'),subtotal: this.get('newProductSubtotal')});
new_cart_item.save();
});
},
deleteproduct: function(product){
if (window.confirm("Are you sure you want to delete this record?")) {
this.get('model').map(function(application) {
application.get('cart_items').deleteRecord(product);
});
}
}
});
But when i am trying to save product i am getting an exception
Uncaught TypeError: Object [object global] has no method 'get'
And when i am trying to delete product i am getting an exception
Uncaught TypeError: Object [object Object] has no method 'deleteRecord'
Here,i also want to implement one functionality i.e. on every save i need to check if that product is already present or not.
If product is not present then only save new product other wise update existing product.
But i don't have any idea how to do this?
I have posted my complete code here.
Can anyone help me to make this jsfiddle work?
Update
I have updated my code here with debugs.
Here, i am not getting any exception but record is also not getting delete.
I am not getting what is happening here?
Can anyone help me to make this jsfiddle work?
'this' context changes within your save method. You need to use the 'this' of the controller and not the map functions. Try this:
save: function(){
var self = this;
self.get('model').map(function(application) {
var new_cart_item = application.get('cart_items').create({
name: self.get('newProductDesc'),
qty: self.get('newProductQty'),
price: self.get('newProductPrice'),
subtotal: self.get('newProductSubtotal')
});
new_cart_item.save();
});
}
I'm trying to generate a jqgrid which populates from a JSON feed, being output from a django backend.
The python handling the request is as follows:
from django.http import HttpResponse
from django.utils import simplejson
def json_test(request):
results = {'total':'1',
'page':'1',
'records':'2',
'rows':[{'id':'1','field1':'blah','field2':'bleh'},
{'id':'2','field1':'bloo','field2':'blum'}]}
json = simplejson.dumps(results)
return HttpResponse(json, mimetype='application/json')
So going to http://127.0.0.1:8000/json_test/ returns the following:
{"records": "2", "total": "1", "rows": [{"field2": "bleh", "field1": "blah", "id": "1"}, {"field2": "blum", "field1": "bloo", "id": "2"}], "page": "1"}
The jquery code is as follows:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'http://127.0.0.1:8000/json_test/',
datatype: 'json',
mtype: 'GET',
colNames:['field1','field2'],
colModel :[
{name:'field1', width:55},
{name:'field2', width:90},
],
pager: '#pager',
rowNum:10,
rowList:[10,20],
sortname: 'field1',
sortorder: 'desc',
viewrecords: true,
caption: 'Test Grid'
});
});
</script>
On loading the page, the grid renders correctly, and it briefly displays 'loading data', but it then displays no rows.
Any ideas where I've gone wrong? I've tried to strip this back to as simple a case as possible to determine the cause.
According to the jqGrid Documentation, by default the grid expects JSON data in the following format:
{
total: "xxx",
page: "yyy",
records: "zzz",
rows : [
{id:"1", cell:["cell11", "cell12", "cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23"]},
...
]
}
So basically it looks like you need to set an ID for each of your columns. If this is not feasible you would need to specify your own jsonReader.
Additionally, having your total/page/records sections out-of-order might cause problems - if you still have trouble after adding the ID's then this would be the next thing to look at.
Solved - I put the html page inside the django app, so that the jqgrid url became just url:'/json_test/' and then it worked. Must be something harcoded into jqgrid that only permits local urls?
try this...
loadError: function(xhr,status,error){alert(status+" "+error);}