I'm using a marionette compositeview to display a collection, the code is below.
However, inside my collection I have 5 filters that are bound to events that then update the collection from the API.
The way I see it, theres two options, I would like opinions on which is better:
1) Use a layout view, somehow figure out how a compositeview can catch the filter views options and update the collection.
2) Use onRender to display the filter views and again catch the events in the compositeview
define(["marionette", "text!app/templates/posts/collection.html", "app/collections/posts", "app/views/posts/item"],
function(Marionette, Template, Collection, Item) {
"use strict"
return Backbone.Marionette.CompositeView.extend({
template: Template,
itemView: Item,
itemViewContainer: "tbody",
filter: {
from: 0,
to: 15,
publish_target: null,
status: null,
type: null,
publish_from_date: null, //publish_from_date=2014-01-07
publish_to_date: null, //publish_to_date=2014-01-07
publish_from_time: null, //publish_from_time=01%3A00%20AM
publish_to_time: null, //publish_to_time=12%3A30%20AM
location_id: null,
client_id: null
},
events: {
'change .filterBy': 'onClickFilter',
'change .filterByDate': 'onClickFilterDate'
},
collectionEvents: {
'sync': 'hideLoading'
},
initialize: function(options) {
//set loading, important we do this because we re-trigger the collection
this.setLoading();
// don't call a new collection unless its the init load, we lose collection automatically triggered events otherwise
if (_.isEmpty(options) || !_.has(options, 'newCollection')) {
this.collection = new Collection()
}
//strip any null key values from this.filter so the api doesnt filter crap
this.filter = _.cleanNullFieldsFromObject(this.filter);
//fetch the collection
return this.collection.fetch({data: this.filter})
},
// date was triggered, so get the details
onClickFilterDate: function() {
var publishFrom = new Date($('#publish_from_date').val());
var publishTo = new Date($('#publish_to_date').val());
this.filter.publish_from_date = _.dateToYMD(publishFrom);
this.filter.publish_to_date = _.dateToYMD(publishTo);
this.filter.publish_from_time = _.dateToHM(publishFrom);
this.filter.publish_to_time = _.dateToHM(publishTo);
// from time is greater than two time, then fetch the collection
if ( (publishFrom.getTime() / 1000) < (publishTo.getTime() / 1000) ) {
this.initialize({newCollection: true});
}
},
// a typical filter is clicked, so figure out whats happening
onClickFilter: function (ev) {
var type = $('#'+ev.currentTarget.id).data('type')
switch (type) {
case 'status':
this.filter.status = $('#filterStatus').val();
break;
case 'publish_target':
this.filter.publish_target = $('#filterPublishTarget').val();
break;
case 'type':
this.filter.type = $('#filterType').val();
break;
case 'client_id':
this.filter.client_id = $('#filterClientId').val();
break;
case 'location_id':
this.filter.location_id = $('#filterLocationId').val();
break;
}
this.initialize({newCollection: true});
},
hideLoading: function() {
this.$el.find('.loading-latch').removeClass('loading-active');
},
//set loading by appending to the latch
setLoading: function() {
this.$el.find('.loading-latch').addClass('loading-active');
}
})
})
define(["marionette", "text!app/templates/posts/item.html"],
function(Marionette, Template) {
"use strict"
return Backbone.Marionette.ItemView.extend({
template: Template,
tagName: "tr",
initialize: function () {
this.model.set('statusReadable', this.model.getStatus());
}
})
})
I actually went ahead and built both. I prefer the layout view.
Both have the concept of having a filter object that fetches and passes query params to the api.
Here are both solutions.
Using a layout that catches filter:changes vents to then update a filter object that gets passed into the collection view (I favour this because only the collection gets redrawn when a filter is changed)
http://pastebin.com/XNmQjs1i
Using a collection view that catches class events and redraws the view (I don't favour this because everything gets redrawn everytime the user changes a filter)
http://pastebin.com/WML2iiM4
I'm sure this might come in handy for marionette newbies, theres a lot of my learning poured into this. Enjoy.
Related
I want to be able to overwrite one of the fields in ListItem when a ListItem of the same Id comes in from my middleware. The issue is that if I create a custom merge function for any field it makes my pagination stop working. The new data is not properly merged in the list of results.
When I console.log in the resultPagination merge-function it seems to merge properly. But, in my interface where I am calling resultPagination the state is stuck on loading. So, in other words, I can fetch the first page of results, but when I call fetchMore I get stuck on loading.
If I remove the custom merge function in ListItem the pagination starts working properly again. If I don't define a merge for any specific fields in ListItem, but just define merge as true the pagination works properly, and the ListItem is updated, but the values in the ListItem are completely overwritten ( I just want to change the value of one field ).
How do I define a custom Merge function for ListItem while still allowing Pagination to work in the result Pagination?
Below I give an example of how my structure is looking right now:
export const typePolicies: TypePolicies = {
ListItem: {
fields: {
tags: {
merge: (existing: Tag[] = [], incoming: Tag[]) => {
return !!incoming ? incoming : existing;
}
}
}
},
Query: {
fields: {
resultPagination: {
keyArgs: ["query", "sortByDate", "specificFields"],
merge: (existing, incoming, args) => {
if (!incoming) return existing;
if (args.args.offset === 0) return incoming;
const existingListItemLists: ListItem[][] =
existing?.articleSummaries ?? [];
const incomingListItemLists: ListItem[][] =
incoming?.articleSummaries ?? [];
return {
...incoming,
results: [...existingListItemLists, ...incomingListItemLists]
};
}
}
}
}
};
Element binding snippet
var oModel = oView.getModel();
var oPromiseMetadataLoaded = oModel.metadataLoaded();
oPromiseMetadataLoaded.then(function() {
var sObjectPath = oModel.createKey("Project", {
ProjectID: sProjectId
});
oView.bindElement("/" + sObjectPath);
// <HERE>
});
Now I want to execute a function (marked with '// ' where it should go) which uses data from the bound Object. When the data is not there yet (the model is obviously an OData model), I need to attach to the dataReceived event, but when when the data is already there, this event won't fire.
What is the most (UI5) idiomatic way to execute code in both cases? Is there a Promise like oModel.metadataLoaded()? Do I need to consider something, e.g. to probably not read data from an object previously bound to the view?
Maybe you can attach to the change-Event?
oView.bindElement({
path: "/" + sObjectPath,
events : {
change: this._onBindingChange.bind(this),
dataRequested: function (oEvent) {
oView.setBusy(true);
},
dataReceived: function (oEvent) {
oView.setBusy(false);
}
}
});
_onBindingChange : function (oEvent) {
if (this.getView().getBindingContext()) {
//HERE
}
else { //Invalid Binding Context };
}
I'm working with Zend 1 with dojo and do not know how to use ajax . In my particular case that when selecting a select , whether made in consultation ajax back from the database information. To enter a ID from user print the information from user by ajax.In my work I can't use jquery.
Good question!
Not is very productive work with dojo, but is possible make exactly how do you want. You will create p element with information captured in data base
In your form, add attribute 'onChange'
$form->setAttrib('onChange', 'recoveryData()');
In js file do you have a function recoveryData(), something as:
dojo.require("dojo.html");
// clean data
var myNewElement = dojo.byId('myNewElement');
if (myNewElement != null) {
dojo.empty("myNewElement");
}
dojo.xhrPost({
content: {id: dojo.attr(dojo.byId("myElement"), "value")},
url: 'your-base-path/recovery-data/',
load: function (response) {
if (response != false) {
// converte to obj
var obj = dojo.fromJson(response);
// creat new element
var node = dojo.create("span", {
innerHTML: obj.NomeServidor,
id: "myNewElement",
'class': 'row'
}
);
dojo.place(node, dojo.byId("myElement"), "after");
}
}
});
Now, you need create an Action "recoveryDataAction()" in your Controller like this:
$data = $this->getrequest()->getPost();
$id = $data['id'];
if ($this->getrequest()->isXmlHttpRequest()) {
// disable layout
$this->_helper->layout()->disableLayout();
// disable view render
$this->_helper->viewRenderer->setNoRender();
$yourTable = new Project_Model_YourTable();
$row = $yourTable->fetchRow($id);
if ($infos != null) {
echo Zend_Json::encode($row);
return;
}
echo false;
}
I've written a custom editor for Slickgrid which shows drop down box with items from sql db. These items are in the formal [id] [text]
I wish to store the [id] into the slickgrid data, but show the [text] to the user. There doesn't appear to be a callback for "display" rather than "store", so not sure how to do this? Hopefully I don't have to write a custom renderer as well?
eg.
this.init = function () {
$select = $("<SELECT tabIndex='0' class='editor-result'><OPTION value='1'>Passed</OPTION><OPTION value='0'>Failed</OPTION></SELECT>");
$select.appendTo(args.container);
$select.focus();
};
this.serializeValue = function () {
return $select.val();
};
this.applyValue = function (item, state) {
item[args.column.field] = state;
};
It appears that yes, I do have to add a custom renderer (or rather, a formatter), but it's quite simple, so not so bad:
function ResultFormatter(row, cell, value, columnDef, dataContext) {
return value ? "Passed" : "Failed";
}
I have a backbone collection on the client.
Model of the collection has some properties along with another collection
When I do fetch() my action method on the server returns some data, collection gets populated, all the properties too, except that nested collection.
What could be the reason?
var Job = Backbone.Model.extend();
var Jobs = Backbone.Collection.extend({model: Job})
var Foo = Backbone.Model.extend({
initialize:function(){
this.jobs = new Jobs();
}})
var FooCollection = Backbone.Collection.extend({model: Foo})
var fooCol = new FooCollection()
fooCol.fetch();
fooCol.first().get('name') // => returns name
fooCol.first().jobs.toJSON() // returns nothing
// although this will
fooCol.first().get('jobs') //it will return an array
So somehow nested Backbone collection becomes just a regular property (Array)
OK - with your extra information, I can give you an answer.
First - "get" doesn't get a property off of the model. It gets a property off of the model's attributes property. So, the attributes probably look like:
{
name: 'blah',
jobs: [{name: 'job1'}, {name: 'job2'}]
}
Backbone doesn't automagically transform arrays into collections and models, and simply setting this.jobs isn't going to work. What you need to do is a little more complex.
var Foo = Backbone.Model.extend({
initialize:function(){
this.jobs = new Jobs(this.attributes.jobs));
}
});
This will set your 'jobs' property to a new jobs object with the data that was sent over for the jobs. But, alas, it won't automatically fire events on the Jobs collection, nor will it allow you to use helpers like this.get('jobs').each(fn); - you'll only be able to use it as Foo.jobs.each(fn).
In order for you to use the attribute as an actual collection, you'll have to do a lot more complicated things.
var Foo = Backbone.Model.extend({
initialize:function(){
this.createJobs(this.attributes.jobs);
},
toJSON: function () {
var json = Backbone.Model.prototype.toJSON.apply(this);
json.jobs = this.get('jobs').toJSON();
return json;
},
set: function (key, val) {
var attributes;
if(!_.isObject(key)) {
attributes = {}; attributes[key] = val;
} else {
attributes = key;
}
safeAttributes = _.omit(attributes, 'jobs');
Backbone.Model.prototype.set.call(this, safeAttributes);
if(attributes.jobs) { this.get('jobs').reset(attributes.jobs); }
},
clear: function () {
if(this.get('jobs') && this.get('jobs').destroy) {
this.get('jobs').off();
this.get('jobs').destroy();
}
Backbone.Model.prototype.clear.apply(this);
this.createJobs();
},
createJobs: function (jobsArray) {
var jobsCollection = new Jobs(jobsArray);
jobsCollection.on('change', function () {this.trigger('change'); }, this);
this.set('jobs', jobsCollection);
}
});
Note that this is completely untested, but hopefully it shows some of the way you'd do this.