What is the correct way to pass a view variable from the URL to a View Model to filter the result?
For example:
dataSource: new kendo.DataSource( {
transport: {
read: {
url: 'http://api.endpoint.com/resource',
}
parameterMap: function(options,type) {
if (type === 'read') {
return {
FormID: view.params.FormID
};
}
}
});
In the example above, there's a parameter in the URL called "FormID" and I would like to pass that value right to the parameterMap function. There is no "view" object, so I'm just putting that as an example.
I tried hooking into to the "data-show" and "data-init" functions to set this value to use, but the datasource fetches the data before these functions run.
Thanks
The configuration option options.transport.read can be a function, so you can compose the url there:
dataSource: new kendo.DataSource({
transport: {
read: function (options) {
// get the id from wherever it is stored (e.g. your list view)
var resourceId = getResourceId();
$.ajax({
url: 'http://api.endpoint.com/resource/' + resourceId,
dataType: "jsonp",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
}
});
To connect this with your list view, you could use the listview's change event:
data-bind="source: pnrfeedsDataSource, events: { change: onListViewChange }"
then in viewModel.onListViewChange you could set the appropriate resource id for the item that was clicked on:
// the view model you bind the list view to
var viewModel = kendo.observable({
// ..., your other properties
onListViewChange: function (e) {
var element = e.sender.select(); // clicked list element
var uid = $(element).data("uid");
var dataItem = this.dataSource.getByUid(uid);
// assuming your data item in the data source has the id
// in dataItem.ResourceId
this._selectedResource = dataItem.ResourceId;
}
});
Then getResourceId() could get it from viewModel._selectedResource (or it could be a getter on the viewModel itself). I'm not sure how all of this is structured in your code, so it's difficult to give more advice; maybe you could add a link to jsfiddle for illustration.
You may use a "global" variable or a field in the viewmodel for that purpose. Something like
var vm = kendo.observable({
FormID: null,
dataSource: new kendo.DataSource( {
transport: {
read: {
url: 'http://api.endpoint.com/resource',
}
parameterMap: function(options,type) {
if (type === 'read') {
return {
FormID: vm.FormID
};
}
}
})
});
function viewShow(e) {
vm.set("FormID", e.view.params.FormID);
// at this point it is usually a good idea to invoke the datasource read() method.
vm.dataSource.read();
}
The datasource will fetch the data before the view show event if a widget is bound to it. You can work around this problem by setting the widget autoBind configuration option to false - all data-bound Kendo UI widgets support it.
Related
I have a Sitesand a Positionscollection. Each time the user selects a new site, the id is sent to the refreshPositions method which is in charge of doing the fetch call.
The route to get the positions look like this '.../sites/1/positions'
view.js
refreshPositions: function(siteId) {
this._positions.fetch({
success: this.onPositionsFetchSuccess.bind(this),
error: this.onPositionsFetchError.bind(this)
});
},
So refreshPositions is called whenever I need to update the positionson the page and the siteId parameter has the id, I just don't know to tell fetch to route to something like .../sites/n/positions where n would be the siteId .
Sorry if I missed relevant informations for my question, I'm pretty new to backbone.
I see, so you are calling fetch from your Positions Collection. The out-of-the-box functionality there is to fetch the whole collection (every Position object) if you have a RESTfull api set up. If you want more specific behaviour from your collection, you can probably write it into the Collection object definition.
var PositionCollection = Backbone.Collection.extend({
initialize: function(models, options) {
this.siteId = (options && options.siteId) || 0;
},
url: function() {
if (!this.siteId) {
return '/positions'; // or whatever
}
return '/sites/' + this.siteId + '/positions';
},
// etc...
});
Then, assuming that _positions refers to an instance of PositionCollection you can do:
refreshPositions: function(siteId) {
this._positions.siteId = siteId; // or wrap in a setter if you prefer
this._positions.fetch({
success: this.onPositionsFetchSuccess.bind(this),
error: this.onPositionsFetchError.bind(this)
});
},
I'm new with backbone and faced the following problems. I'm trying to emulate some sort of "has many relation". To achieve this I'm adding following code to initialize method in the model:
defaults: {
name: '',
tags: []
},
initialize: function() {
var tags = new TagsCollection(this.get('tags'));
tags.url = this.url() + "/tags";
return this.set('tags', tags, {
silent: true
});
}
This code works great if I fetch models through collection. As I understand, first collection gets the data and after that this collection populates models with this data. But when I try to load single model I get my property being overridden with plain Javascript array.
m = new ExampleModel({id: 15})
m.fetch() // property tags get overridden after load
and response:
{
name: 'test',
tags: [
{name: 'tag1'},
{name: 'tag2'}
]
}
Anyone know how to fix this?
One more question. Is there a way to check if model is loaded or not. Yes, I know that we can add callback to the fetch method, but what about something like this model.isLoaded or model.isPending?
Thanks!
"when I try to load single model I get my property being overridden with plain Javascript array"
You can override the Model#parse method to keep your collection getting overwritten:
parse: function(attrs) {
//reset the collection property with the new
//tags you received from the server
var collection = this.get('tags');
collection.reset(attrs.tags);
//replace the raw array with the collection
attrs.tags = collection;
return attrs;
}
"Is there a way to check if model is loaded or not?"
You could compare the model to its defaults. If the model is at its default state (save for its id), it's not loaded. If it doesn't, it's loaded:
isLoaded: function() {
var defaults = _.result(this, 'defaults');
var current = _.wíthout(this.toJSON(), 'id');
//you need to convert the tags to an array so its is comparable
//with the default array. This could also be done by overriding
//Model#toJSON
current.tags = current.tags.toJSON();
return _.isEqual(current, defaults);
}
Alternatively you can hook into the request, sync and error events to keep track of the model syncing state:
initialize: function() {
var self = this;
//pending when a request is started
this.on('request', function() {
self.isPending = true;
self.isLoaded = false;
});
//loaded when a request finishes
this.on('sync', function() {
self.isPending = false;
self.isLoaded = true;
});
//neither pending nor loaded when a request errors
this.on('error', function() {
self.isPending = false;
self.isLoaded = false;
});
}
I want to retrieve a collection of keywords of a file with an POST request like this:
api.host.com/file/4/keywords
But how do I have to define my url and urlRoot Keyword model and keyword collection?
I've read the docs, but I could not figured it out.
As usual, in general but especially in JS, there are many ways to do that. I can tell you a couple of ways I would do that.
1) I would define a keywords Collection as
Keywords = Backbone.Collection.extend( { ... } )
Then use it as a property of the File Model and I would set the correct value during initialize()
File = Backbone.Model.extend({
// the empty array [] is the initial set of models
this.keywords = new Keywords([], { url: '/file/' + this.id + '/keywords' });
})
This way you can call file.keywords.fetch() to get the content.
2) I would define a keywords Collection as
Keywords = Backbone.Collection.extend({
initialize: function(models, options) {
this.modelId = options.modelId
},
url: function() {
return '/file/' + this.modelId + '/keywords'
}
});
And then, when needed, I would create instance like this:
File = Backbone.Model.extend({
this.keywords = new Keywords([], { modelId: this.id });
})
To give you a complete answer, you could actually drop the initialize() function (if you don't need it) and write and url function as
url: function() {
return '/file/' + this.options.modelId + '/keywords'
}
In my Application, I have the following JSON data format:
{
Item: {
property1: '',
...
}
}
Following the solution of this stackoverflow.com answer, I modeled my Backbond.js models the following way:
App.Models.Item = Backbone.Model.extend({
});
App.Models.ItemData = Backbone.Model.extend({
defaults: {
'Item': new App.Models.Item
}
});
I now want to bootstap the data to my App from the Backend system on the page load the following way:
var item = App.Models.ItemData({
{Item:
{property1: 'data'}
}
});
The problem I have now is that item.get('Item') returns a plain JavaScrip object and not a Backbone.Model object, because the defaults are overwritten. How can I create the Backbone.js object while ensuring that item.get('Item') is an App.Models.Item object?
I also have read that if you nest Backbone.Models, you should wirite custom getter methods, so the rest of your app dose not have to know about the internal data structure. If so, what is the right way to implement those setters and getters?
You can override the parse method on your ItemData model. No defaults required. The parse method will initialize an empty model, if one is not passed:
App.Models.ItemData = Backbone.Model.extend({
parse: function(attrs) {
attrs = attrs || {};
if(!(attrs.Item instanceof App.Models.Item))
attrs.Item = new App.Models.Item(attrs.Item);
return attrs;
}
});
And then initialize your ItemData model with the option parse:true:
var item = new App.Models.ItemData({Item:{property1: 'data'}}, {parse:true});
I'm loading an external script (that creates a new window component) into a panel, which works fine.
Now, I want to access the created window from a callback function to register a closed event handler. I've tried the following:
panel.load({
scripts: true,
url: '/createWindow',
callback: function(el, success, response, options) {
panel.findByType("window")[0].on("close", function { alert("Closed"); });
}
});
However, the panel seems to be empty all the time, the findByType method keeps returning an empty collection. I've tried adding events handlers for events like added to the panel but none of them got fired.
I don't want to include the handler in the window config because the window is created from several places, all needing a different refresh strategy.
So the question is: how do I access the window in the panel to register my close event handler on it?
The simplest solution would be to simply include your close handler in the window config that comes back from the server using the listeners config so that you could avoid having a callback altogether, but I'm assuming there's some reason you can't do that?
It's likely a timing issue between the callback being called (response completed) and the component actually getting created by the ComponentManager. You might have to "wait" for it to be created before you can attach your listener, something like this (totally untested):
panel.load({
scripts: true,
url: '/createWindow',
callback: function(el, success, response, options) {
var attachCloseHandler = function(){
var win = panel.findByType("window")[0];
if(win){
win.on("close", function { alert("Closed"); });
}
else{
// if there's a possibility that the window may not show
// up maybe add a counter var and exit after X tries?
attachCloseHandler.defer(10, this);
}
};
}
});
I got it to work using a different approach. I generate a unique key, register a callback function bound to the generated key. Then I load the window passing the key to it and have the window register itself so that a match can be made between the key and the window object.
This solution takes some plumbing but I think its more elegant and more reliable than relying on timings.
var _windowCloseHandlers = [];
var _windowCounter = 0;
var registerWindow = function(key, window) {
var i;
for (i = 0; i < _windowCounter; i++) {
if (_windowCloseHandlers[i].key == key) {
window.on("close", _windowCloseHandlers[i].closeHandler);
}
}
};
var loadWindow = function(windowPanel, url, params, callback) {
if (params == undefined) {
params = { };
}
windowPanel.removeAll(true);
if (callback != undefined) {
_windowCloseHandlers[_windowCounter] = {
key: _windowCounter,
closeHandler: function() {
callback();
}
};
}
Ext.apply(params, { windowKey: _windowCounter++ });
Ext.apply(params, { containerId: windowPanel.id });
windowPanel.load({
scripts: true,
params: params,
url: url,
callback: function(el, success, response, options) {
#{LoadingWindow}.hide();
}
});
};
Then, in the partial view (note these are Coolite (Ext.Net) controls which generate ExtJs code):
<ext:Window runat="server" ID="DetailsWindow">
<Listeners>
<AfterRender AutoDataBind="true" Handler='<%# "registerWindow(" + Request["WindowKey"] + ", " + Detailswindow.ClientID + ");" %>' />
</Listeners>
</ext:Window>
And finally, the window caller:
loadWindow(#{ModalWindowPanel}, '/Customers/Details', {customerId: id },
function() {
#{MainStore}.reload(); \\ This is the callback function that is called when the window is closed.
});