I try to integrate Fuelux repeater in Aurelia app. The problem is that the columns are not rendering :
SOLVED. The problem was "columns" are defined in the Aurelia class. But in the ajax callback, "this" is undefined, the solution was to bind :
defineRepeater() {
let __this = this;
// initialize the repeater
($('#myRepeater') as any).repeater({
//init stuff
dataSource: __this.customDataSource.bind(__this);
});
}
customDataSource(options: any, callback) {
let __this = this;
...
columns: __this.columns
...
}
Related
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;
});
}
Basically I've a panel called DummyPanel, Now on dummypanel initialize event I've called a controller function like as follows:
var me = component;
var fieldCollection =
{
"Order" : 'ordNumber',
"Ref": 'refNumber'
};
me.fireEvent('myControllerFunction','Param1', fieldCollection, 'Param3');
Now I want to get fieldCollection JSON object value within function myControllerFunction, to get value from fieldCollection I'm using following code:
myControllerFunction(param1, collection, param3)
{
Ext.Msg.alert(collection.Order);
}
But it does not return anything. So please let me know how to resolve this problem!!
Any comment will appreciated!!
I'm not quite sure what it means "But it does not return anything", but I'll try.
So, your "DummyPanel" view have a alias or itemId property. In yor controller (in init() function), you need "keep track" of your view. For example:
In your view:
me.fireEvent('myEventName','Param1', fieldCollection, 'Param3');
In your controller:
init:function(){
var me = this;
this.control({
'panel[itemId=your-view-itemId]': { // call your function after event
myEventName: me.myControllerFunction
}
});
...
},
...
myControllerFunction: function(...) {
...
}
Should it not be
Ext.Msg.alert(collection["Order"])?
Or if you want to keep Ext.Msg.alert the way it is fieldCollection should be defined this way
var fieldCollection =
{
Order : 'ordNumber',
Ref : 'refNumber'
};
I am trying to either override or extend an existing component - the Rally.ui.PercentDone component. I want to provide it with a portfolio item with all the data necessary to render it using the same color coding Rally native apps use (the Rally Health Color Calculator).
I really just need the function to pass the correct record. Here is my idea so far:
Ext.define('Custom.PercentDone', {
requires: ['Rally.ui.renderer.template.progressbar.PortfolioItemPercentDoneTemplate', 'Rally.util.HealthColorCalculator'],
extend : 'Rally.ui.PercentDone',
alias : 'widget.cpercentdone',
config: {
record: null
},
constructor: function(config) {
config = this.config;
this.renderTpl = Ext.create('Custom.renderer.template.progressbar.PercentDoneTemplate', {
calculateColorFn: Ext.bind(function(recordData) {
console.log('called my custom coloring fn');
var colorObject = Rally.util.HealthColorCalculator.calculateHealthColorForPortfolioItemData(config.record, config.percentDoneName);
return colorObject.hex;
}, this)
});
this.renderData = config;
this.mergeConfig(config);
this.callParent([this.config]);
}
});
var custom = Ext.create('Custom.PercentDone', {
record: item,
percentDoneName: 'PercentDoneByStoryPlanEstimate',
});
but my calculate color function is not being called instead of the default.
I got it to work by overriding:
var percentDoneByStoryCountEl = Ext.create("Rally.ui.PercentDone", {
record: item,
percentDoneName: "PercentDoneByStoryCount",
percentDone: item.PercentDoneByStoryCount
});
tpl = percentDoneByStoryCountEl.renderTpl;
tpl.calculateColorFn = function (recordData) {
var colorObject = Rally.util.HealthColorCalculator.calculateHealthColorForPortfolioItemData(item, "PercentDoneByStoryCount");
return colorObject.hex;
};
Ext.override(percentDoneByStoryCountEl, {
renderTpl: tpl
});
but I would like to figure out how to do it via extending the component instead.
Thanks for your help.
Details:
In panel(View) I set selModel ：
this.selModel = Ext.create('Ext.selection.CheckboxModel',{
listeners:{
selectionchange: function (sm,selections){
Ext.getCmp('removeButton').setDisabled(selections.length===0);
}
},
mode:'MULTI'
});
The target is delelte the item that was checked
In controller I wrote a func :
remove:function(){
var view = Ext.widget('userlist');
selection = view.selModel.getSelection();
var store = this.getUsersStore();
if(selection){
store.remove(selection);
store.sync();
}else{
alert('failed!');
}
}
I just can't acqurice the “selection”,anything wrong?
Ext.widget creates a new component, it is not a method to retrieve a reference to a previously created component.
There are several ways to get a reference, Ext.getCmp, Ext.ComponentQuery, or using refs in your controller config
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});