My problem is very specific to Backbone Associations (http://dhruvaray.github.io/backbone-associations). I'm wondering if it's possible to merge attributes when setting properties on nested models. Here is a reduction of the issue:
// define the Layout model
var Layout = Backbone.AssociatedModel.extend();
// define the User model, with layout as a Related model
var User = Backbone.AssociatedModel.extend({
relations: [
{
type: Backbone.One,
key: 'layout',
relatedModel: Layout
}
],
defaults: {
layout: {}
}
});
// create a new user
var user = new User({ user_name: 'pascalpp' });
// set a property on the layout model
user.set('layout.foo', 'bar');
user.get('layout.foo'); // returns 'bar'
// call set on the user directly, passing a JSON structure with no foo property
user.set({ layout: { 'baz': 'bing' } });
user.get('layout.foo'); // foo got wiped, so this returns undefined
The real-world scenario I'm facing is that we need to fetch partial data for a user and set that on the user model without obliterating previously set attributes that don't exist in the current fetch. So I'm hoping we can merge when setting attributes. Is this possible?
Backbone-associations updates existing nested model if id's of new and existing model match. If id's are undefined or they don't match, then the nested model gets replaced by a new one.
What I do for these singleton nested models is I introduce fake id=0 and then it works like expected.
Here is a working jsfiddle.
Working code:
// define the Layout model
var Layout = Backbone.AssociatedModel.extend({
defaults: {
id: 0
}
});
// define the User model, with layout as a Related model
var User = Backbone.AssociatedModel.extend({
relations: [
{
type: Backbone.One,
key: 'layout',
relatedModel: Layout
}
],
defaults: {
layout: {}
}
});
// create a new user
var user = new User({ user_name: 'pascalpp' });
// set a property on the layout model
user.set('layout.foo', 'bar');
user.get('layout.foo'); // returns 'bar'
// call set on the user directly, passing a JSON structure with no foo property
user.set({ layout: { id:0, 'baz': 'bing' } });
user.get('layout.foo'); // foo got wiped, so this returns undefined
alert(user.get('layout.foo'))
Related
What I am trying to do is to get data from the server and then putting it all in an observable and then make all the properties observable. The issue I am facing is that it does not make all my properties observable and I need them all to be observable as sometimes depending on the data it makes some properties observable and sometimes it doesn't.
var viewModel = this;
viewModel.Model = ko.observable();
viewModel.SetModel = function (data) {
viewModel.Model(ko.mapping.fromJS(data));
}
The data that I am receiving from the server is like this for example: normaldata,items(this is an array with unknown number of elements).
so if i try to access data like viewModel.Model().Items[0]().Layer() i sometimes have Layer as a function and sometimes it is a normal element with observable elements.I want all my objects inside Items to have Layer as a function.
Server data example:
Name: "test"
Items: [Layer[ID: 132]]
In this example Name,Items and ID are observable but Layer is not.
Fiddle example:
jsfiddle.net/98dv11yz/3
So the problem is that sometimes the layer is null resulting in ko making the property observable but sometimes that property has id and ko makes only the child elements observable. The problem is that i have if's in the code and i want it to be a function so i can always reffer to it as layer() because now it is sometimes layer or layer()
An explenation for what's happening:
When the ko.mapping plugin encounters an object in your input, it will make the object's properties observable, not the property itself.
For example:
var myVM = ko.mapping.fromJS({
name: "Foo",
myObject: {
bar: "Baz"
}
});
Will boil down to:
var myVM = {
name: ko.observable("Foo"),
myObject: {
bar: ko.observable("Baz")
}
}
and not to:
var myVM = {
name: ko.observable("Foo"),
myObject: ko.observable({
bar: ko.observable("Baz")
})
}
The issue with your data structure is that myObject will sometimes be null, and sometimes be an object. The first will be treated just as the name property in this example, the latter will be treated as the myObject prop.
My suggestion:
Firstly: I'd suggest to only use the ko.mapping.fromJS method if you have a well documented and uniform data structure, and not on large data sets that have many levels and complexity. Sometimes, it's easier to create slim viewmodels that have their own mapping logic in their constructor.
If you do not wish to alter your data structure and want to keep using ko.mapping, this part will have to be changed client-side:
Items: [
{ layer: {id: "0.2"} },
{ layer: null}
]
You'll have to decide what you want to achieve. Should the viewmodel strip out the item with a null layer? Or do you want to render it and be able to update it? Here's an example of how to "correct" your data before creating a view model:
var serverData = {
Name: "Example Name",
Id: "0",
Items: [
{layer: {id: "0.2"} },
{layer: null}
]
};
var correctedData = (function() {
var copy = JSON.parse(JSON.stringify(serverData));
// If you want to be able to render the null item:
copy.Items = copy.Items.map(function(item) {
return item.layer ? item : { layer: { id: "unknown" } };
});
// If you don't want it in there:
copy.Items = copy.Items.filter(function(item) {
return item.layer;
});
return copy;
}());
Whether this solution is acceptable kind of relies on how much more complicated your real-life use will be. If there's more complexity and interactivity to the data, I'd suggest mapping the items to their own viewmodels that deal with missing properties and what not...
Model code:
App.Team = Backbone.RelationalModel.extend({
urlRoot: 'data/json/team',
/*urlRoot: 'data/json/myteam.txt',*/
idAttribute: 'id',
relations:
...
app.currentTeam = new App.Team({id:11});
View:
var trophiesBox = JST['teaminfo/history/leftbox'](app.currentTeam.attributes);
$("#teamhistory_leftbox").append(trophiesBox);
for (var i = 1; i <= app.currentTeam.attributes.history.length; i++) {
var historyData = app.currentTeam.attributes.history.get(i);
var historyRow = JST['teaminfo/history/row'] (historyData.attributes);
$("#teamhistory_table_body").append(historyRow);
}
I'm getting "Uncaught TypeError: Cannot read property 'attributes' of undefined"
on var historyRow = JST['teaminfo/history/row'] (historyData.attributes); line.
Before I had problems defining historyData, probably since it is a model in a collection (app.currentTeam.attributes.history) inside of another model (app.currentTeam). I was getting [Object] (app.currentTeam.attributes.history) doesn't have a 'get' method type of error. Now it passes fine, but I get another error message in the next line, so I wonder what is wrong with my code here.
app.currentTeam.attributes loads fine, so I guess there is a problem retrieving attributes of a model that is inside a collection within another model.
Edit: relation of Team and History collection:
{
type: Backbone.HasMany,
key: 'history',
relatedModel: 'App.HistoryItem',
collectionType: 'App.History',
reverseRelation: {
key: 'team',
includeInJSON: 'id',
}
}
You get Model from Collection from wrong method
app.currentTeam.attributes.history.get(i);
You have to use
app.currentTeam.get('history') // you got collection
app.currentTeam.get('history').at(i); // you got model from collection by index
Update1:
Try use iterator for get elements from collection:
var trophiesBox = JST['teaminfo/history/leftbox'](app.currentTeam.attributes);
$("#teamhistory_leftbox").append(trophiesBox);
app.currentTeam.get('history').each(function(historyData, i) {
var historyRow = JST['teaminfo/history/row'](historyData.attributes);
$("#teamhistory_table_body").append(historyRow);
}, this);
Have you checked Backbone Associations. This might be of some help.
Two common scenarios when I am using backbone backbone:
Attribute is listed as default value, then set
modelExample_A: Backbone.Model.extend({
defaults: {
whatever: 'foo'
something: 'blah'
}
});
viewExample_A: Backbone.View.extend({
//our view definition
});
var Example_A = new viewExample_A({
model: new modelExample_A()
})
Example_A.set({
'whatever': 'bar',
'something': 'weeeeeee',
});
Attribute is not listed as a default value, then set
modelExample_A: Backbone.Model.extend({
});
viewExample_A: Backbone.View.extend({
//our view definition
});
var Example_A = new viewExample_A({
model: new modelExample_A()
})
Example_A.set({
'whatever': 'bar',
'something': 'weeeeeee',
});
Attribute is not listed as a default value, set on creation
modelExample_A: Backbone.Model.extend({
});
viewExample_A: Backbone.View.extend({
//our view definition
});
var Example_A = new viewExample_A({
model: new modelExample_A({
'whatever': 'bar',
'something': 'weeeeeee',
})
})
But what about situations where I want to set a property of the model? I know this is generally discouraged, but sometimes in my code I like to make a not of a what model is the parent of the current model. This is something that almost certainly won't ever change, so there is no reason to put in the attribute for event listening/onChange purposes. Further, this is something without a default value (it can only get a value in context), so is it okay to just set it as a property of the model? Or will this cause problems down the line?
Setting a property instead of an attribute
modelExample_A: Backbone.Model.extend({
defaults: {
whatever: 'foo'
something: 'blah'
}
});
viewExample_A: Backbone.View.extend({
//our view definition
});
var Example_A = new viewExample_A({
model: new modelExample_A({
'whatever': 'bar',
'something': 'weeeeeee',
})
})
Example_A.parentModel = parentModelExample;
Used in moderation and with consideration, setting non-attribute properties on model instances is fine. Just be careful not to have this be data that can easily get into an inconsistent state, and if you are doing this a lot, that's a code smell. In that case, you may want to consider modeling some state as actual models with attributes, but just not persisting them (never call .save).
backbone Model,board:
define([
'underscore',
'backbone',
'collections/lists',
'iobind',
'iosync'
], function( _, Backbone, Lists,ioBind,ioSync) {
var BoardModel = Backbone.Model.extend({
urlRoot: 'board',
noIoBind: false,
socket: io.connect(''),
idAttribute: '_id',
defaults: {
title: 'One Thousand and One Nights'
},
initialize: function() {
this.id = 1;
this.lists = new Lists;
this.socket.emit('joinBoard',this.id);
_.bindAll(this, 'getBoard');
this.ioBind('initBoard', this.getBoard, this);
},
getBoard: function(data){
this.set(data.data.board[0]);
}
});
return BoardModel;
});
backbone View: boardView:
var IndexView = Backbone.View.extend({
// Instead of generating a new element, bind to the existing elements in the HTML.
el: '#board',
// Board template html
template: Mustache.render(Template.board),
events: {
},
initialize: function() {
//Init Data
this.model = new Board();
// var lists = {
// lists: [
// {name: "To Do",
// cards:[
// {name: "Art work for A."},
// {name: "B Prototype."},
// {name: "C prototype."}
// ]
// },
// {name: "Doing",
// cards: [
// {name: "Art work for A."}
// ]
// },
// {name: "Done"}
// ]
// }
// var partial = {card: Template.card_in_list};
// var listHtml = Mustache.render(Template.list,lists,partial);
// template = $(this.template).find('.list-area').append(listHtml);
},
render: function() {
console.log(this.model);
console.log(this.model.toJSON());
var partial = {card: Template.card_in_list};
var listHtml = Mustache.render(Template.list,this.model,partial);
template = $(this.template).find('.list-area').append(listHtml);
this.$el.html(template);
}
});
in View function: render function, the console.log get different result.
console.log(this.model) can get correct object result:
child
_callbacks: Object
_changing: false
_escapedAttributes: Object
_ioEvents: Object
_pending: Object
_previousAttributes: Object
_silent: Object
attributes: Object
__v: 0
_id: "50b750a7795f285d4e000014"
created: "2012-11-29T12:10:15.269Z"
description: "simple is better, but not simpler"
dueDate: "2012-11-29T12:10:15.269Z"
lists: Array[6]
status: true
title: "test board unique"
__proto__: Object
changed: Object
cid: "c1"
getBoard: function () { [native code] }
id: "50b750a7795f285d4e000014"
lists: child
__proto__: ctor
but this.model.toJSON() only get model default values:
Object
title: "One Thousand and One Nights"
__proto__: Object
it confuse me. anyone know why reason the same model get different result.
In a Backbone Model, your business values (description, title ...) are store in the attributes attribute. When you call toJSON() on your model, what it does is it takes the attributes values, and remove the Backbone.Model object framework's functions and attributes.
When you manually want to set model attributes, you want to use set. I don't know what is in you data.data object, so you should check the doc : http://backbonejs.org/#Model-set
set model.set(attributes, [options])
Set a hash of attributes (one or
many) on the model. If any of the attributes change the models state,
a "change" event will be triggered, unless {silent: true} is passed as
an option. Change events for specific attributes are also triggered,
and you can bind to those as well, for example: change:title, and
change:content. You may also pass individual keys and values.
note.set({title: "March 20", content: "In his eyes she eclipses..."});
book.set("title", "A Scandal in Bohemia"); If the model has a validate
method, it will be validated before the attributes are set, no changes
will occur if the validation fails, and set will return false.
Otherwise, set returns a reference to the model. You may also pass an
error callback in the options, which will be invoked instead of
triggering an "error" event, should validation fail. If {silent: true}
is passed as an option, the validation is deferred until the next
change.
I found i trigger boardView.render twice. when i change code:
a = new boardView;
a.render();
to
a = new boardView;
i got the thing done.
by the way thanks Marcel Falliere's comments.
I would like to make a relation between two models User and Task using backbone-relational.
The relation between the two models is the following:
taskModel.creator_id = userModel.id
// TaskModel
var TaskModel = Backbone.RelationalModel.extend({
relations: [
{
type: Backbone.HasOne,
key: 'creator',
keySource: 'creator_id',
relatedModel: Users
}
],
// some code
});
// Task collection
var TaskCollection = Backbone.Collection.extend({
model: TaskModel,
// some code
});
// User Model
var User = Backbone.RelationalModel.extend({
// some code
});
Actually the problem is in the collection.models, please see the attached images:
Please check this jsfiddle: http://jsfiddle.net/2bsE9/5/
var user = new User(),
task = new Task(),
tasks = new Tasks();
task.fetch();
user.fetch();
tasks.fetch();
console.log(user.attributes, task.attributes, tasks.models);
P.S.:
Actually I am using requireJs to get the UserModel, so I cannot include quotes in relatedModel value.
define([
'models/user',
'backbone',
'relationalModel'
], function (User) {
"use strict";
var Task = Backbone.RelationalModel.extend({
relations: [
{
type: Backbone.HasOne,
key: 'creator',
keySource: 'creator_id',
relatedModel: User
}
],
});
);
Edit 2:
http://jsfiddle.net/2bsE9/13/
I updated the jsfiddle to reflect the changes I suggested below. As long as you are calling toJSON on your task, what gets to the server is a json object with the creator_id property set to the actual id of the user. The keyDestination here is redundant as the documentation states it is set automatically if you use keySource.
Edit:
https://github.com/PaulUithol/Backbone-relational#keysource
https://github.com/PaulUithol/Backbone-relational#keydestination
https://github.com/PaulUithol/Backbone-relational#includeinjson
The combination of the three above might solve your issue.
var Task = Backbone.RelationalModel.extend({
relations: [
{
type: Backbone.HasOne,
// The User object can be accessed under the property 'creator'
key: 'creator',
// The User object will be fetched using the value supplied under the property 'creator_id'
keySource: 'creator_id',
// The User object will be serialized to the property 'creator_id'
keyDestination: 'creator_id',
// Only the '_id' property of the User object will be serialized
includeInJSON: Backbone.Model.prototype.idAttribute,
relatedModel: User
}
],
});
The documentation also states that the property specified by keySource or keyDestination should not be used by your code. The property cannot be accessed as an attribute.
Please try this and comment if that fixes your issue.
Btw, here is a nice blog post that uses backbone-relational end to end.
http://antoviaque.org/docs/tutorials/backbone-relational-tutorial/
Edit
Updated jsfiddle
The problem is that Backbone-Relational explicitly deletes the keySource to 'prevent leaky abstractions'. It has a hardcoded call to unset on the attribute, in Backbone-Relational:
// Explicitly clear 'keySource', to prevent a leaky abstraction if 'keySource' differs from 'key'.
if ( this.key !== this.keySource ) {
this.instance.unset( this.keySource, { silent: true } );
}
You will need to overwrite the unset method in your Task model:
var Task = Backbone.RelationalModel.extend({
urlRoot: ' ',
relations: [
{
type: Backbone.HasOne,
key: 'creator',
relatedModel: User,
keySource: 'creator_id'
}
],
unset: function(attr, options) {
if (attr == 'creator_id') {
return false;
}
// Original unset from Backbone.Model:
(options || (options = {})).unset = true;
return this.set(attr, null, options);
},
sync: function (method, model, options) {
options.success({
id: 1,
name: 'barTask',
creator_id: 1
});
}
});
Obvious problems with this approach are that you will need to modify your code if either Backbone changes its Backbone.Model.unset method or Backbone-Relational changes its keySource behavior.