I subscribe to a Meteor collection; then bind the collection to a $scope var and add some items to $scope. Then, the new items just disappear. Is that correct behavior?
1) subscribe to meteor collection
2) (when promise from subscription resolves ...) $scope.collection = $meteor.collection(MeteorCollection, false); // note: no autoBind
3) $scope.collection.push(item) // can be several items
4) they just 'disappear' from $scope // it seems $scope refreshes from Meteor Collection (that doesn't have those items)
Can somebody explain this behavior? Or, am I doing something (very) wrong?
Many thanks
Related
I am challenged to understand why it is not possible to push/append items to the observable.fromObject so as to update the view. This is odd to me but im probably missing something.
I am populating this:
//declare the viewmodel
const viewModel = new observableModule.fromObject({
//declare the properties of this viewmodel
bulletins: []
});
with this json:
{"total_bulls":"664","GenericName":"Tocilizumab","brandName":"Actemra","drugCat":"(IL-6) Receptor Antagonist","bullID":4847,"fastURL":"https:\/\/gotopills.com\/?post_type=drug-bulletin&p=4847","litAlertLvl":"High"}
It appears there is no way to add a new item using a push or set and instead it seems that the suggestion is to use the observableArray although i then lose the ability to auto-update the view :(
It seems that the odd way to do this is to drop the observableArray into the observable.fromObject as in:
viewModel.bulletins = new ObservableArray(r);
then do a push on the array:
viewModel.bulletins.push(element);
Maybe there is a better way?
I'm having issue getting the React Fabric UI DetailsList to work with React Hooks. It renders, but the selection part does not. Whenever, you select a row, I expect the count of the selection to be updated. However, i'm not seeing that. It looks like the selection component items never get updated even thou the UI shows it being selected. I'm also seeing the onSelectionChange being triggered when you select a row. Now sure if its because i'm using react hooks or what
I took the provided class example which works:
[Codepen]https://codepen.io/pen/?&editable=true (Example)
Same as the original but stripped down
[Codepen]https://codepen.io/darewreckk/pen/NQRWEd?editors=1111
converted it to a react hook component. I would expect the same thing, but i'm not and can't figure out what's different.
Modified Example with Hooks
[Codepen]https://codepen.io/darewreckk/pen/GVjRNb?editors=1111
Any advice appreciated,
Thanks,
Derek
The selection count is stored on the Selection object that you are creating. You could log it out like so:
const _selection = new Selection({
onSelectionChanged: () => {
console.log('Selected count:' + _selection.count);
}
});
You can set the value of selectionCount and selectionDetails whenever onSelectionChanged is called:
const _selection = new Selection({
onSelectionChanged: () => {
setSelectionCount(_selection.count);
setSelectionDetails(`${_selection.count} items selected`)
}
});
As a side note: If you want selectionDetails to update when selectionCount updates, you can use the useEffect hook:
React.useEffect(() => {
setSelectionDetails(`${selectionCount} items selected`);
}, [selectionCount]);
The above effect will run whenever selectionCount updates, and so in turn update selectionDetails.
I've got a modal window that when you click 'Add', it does its thing, dismisses, and then when the promise is resolved, publishes some events that tell relevant components to update:
this._viewControl.dismiss().then(() =>
this._events.publish('update_myJobsPage', null);
this._events.publish('update_assessmentsPage', null);
this._events.publish('update_buildingPage', null);
});
Problem is, sometimes it works and they update their views, sometimes not. The modal always dismisses and the events fire though.
Am I doing something fundamentally wrong here?
Thanks.
Problem is, sometimes it works and they update their views, sometimes
not.
As you can read in this answer, Application state change is caused by three things:
1) Events - User events like click, change, input, submit, …
2) XMLHttpRequests - E.g. when fetching data from a remote service Timers -
3) setTimeout(),setInterval(), because JavaScript
It turns out that these are the only cases when Angular is actually interested in updating the view.
So if you want to update other things outside Angular way, you will have to let Angular know that something has changed and needs to we aware of updating things. You can do this by first importing ngZone like this:
import { ..., NgZone } from '#angular/core';
Declaring it in your constructor like this:
constructor(..., private ngZone: NgZone ) { //... }
And then surrounding your code inside a zone
this._viewControl.dismiss().then(() =>
this.ngZone.run(() => {
// Execute here what you want and Angular will update the view for you.
// ...
this._events.publish('update_myJobsPage', null);
this._events.publish('update_assessmentsPage', null);
this._events.publish('update_buildingPage', null);
});
});
Have you tried onDismiss ?
this._viewControl.onDismiss(() => {
this._events.publish('update_myJobsPage', null);
this._events.publish('update_assessmentsPage', null);
this._events.publish('update_buildingPage', null);
});
So, it turns out, if I empty out my collection when I'm refreshing, so..
e.g
updatePage() {
this.myCollection = [];
this.someService.getItems().then(items => {
this.myCollection = items;
});
}
then the page always shows the update. So I'm going to put this one down to a timing/change detection bug in Angular 2 and move on!
I'm working on Infinite Pagination
(http://addyosmani.github.io/backbone.paginator/examples/infinite-paging/index.html)
I'm using CompositeView for pagination view.
And I've got the following problem. Each time after I get new portions of data Paginator's collection removes old data and adds new so it makes CompositeView to rerender and erase old results.
How can I resolve this problem? I'm thinking about disabling rerender functionality but how it should be done properly?
Thanks in Advance!
var BaseFeedChronoCompositeView = Backbone.Marionette.CompositeView.extend({
tagName: "div",
template: _.template(ChronoFeedComposite_html),
itemView: Article,
events: {
'click #loadmore-button-manual': function (e) {
e.preventDefault();
this.collection.requestNextPage();
},
appendHtml: function (collectionView, itemView, index) {
collectionView.$("#chronoFeed-content").append(itemView.$el);
}
});
Here is the basic code.
this.collection.requestNextPage() - sends request for data to server. After it gets data this.collection removes old models and adds new models.
Composite View is listening for these events and removes itemViews for old models and append itemViews for new models.
And I need CompositeView not to remove old itemViews.
Im not quite sure how this paginator works, as I've never used it. But I think the easiest way to fix this is to make sure that your Collection doesnt remove old models. I assume that when your data is being returned it is doing a set on the collection. If you look at the backbone docs you can see that you can disable this method from removing models http://backbonejs.org/#Collection-set
If you'd like to customize the behavior, you can disable it with
options: {add: false}, {remove: false}, or {merge: false}.
So when you are updating the collection, instead of just calling
myCollection.set([o1,o2,o3]);
you should be doing
myCollection.set([o1,o2,o3], {remove:false});
How do you keep track of your UI elements in Titanium? Say you have a window with a TableView that has some Switches (on/off) in it and you'd like to reference the changed switch onchange with a generic event listener. There's the property event.source, but you still don't really know what field of a form was just toggled, you just have a reference to the element. Is there a way to give the element an ID, as you would with a radiobutton in JavaScript?
Up to now, registered each form UI element in a dictionary, and saved all the values at once, looping through the dictionary and getting each object value. But now I'd like to do this onchange, and I can't find any other way to do it than create a specific callback function for each element (which I'd really rather not).
just assign and id to the element... all of these other solution CAN work, but they seem to be over kill for what you are asking for.
// create switch with id
var switcher0 = Ti.Ui.createSwitch({id:"switch1"});
then inside your event listener
myform.addEventListener('click', function(e){
var obj = e.source;
if ( obj.id == "switch1" ) {
// do some magic!!
}
});
A simple solution is to use a framework that helps you keep track of all your elements, which speeds up development quite a bit, as the project and app grows. I've built a framework of my own called Adamantium.js, which lets you use a syntax like jQuery to deal with your elements, based on ID and type selectors. In a coming release, it will also support for something like classes, that can be arbitrarily added or removed from an element, tracking of master/slave relationships and basic filter methods, to help you narrow your query. Most methods are chainable, so building apps with rich interaction is quick and simple.
A quick demo:
// Type selector, selects all switches
$(':Switch')
// Bind a callback to the change event on all switches
// This callback is also inherited by all new switch elements
$(':Switch').bind('change', function (e) {
alert(e.type + ' fired on ' + e.source.id + ', value = ' + e.value);
});
// Select by ID and trigger an event
$('#MyCustomSwitch').trigger('change', {
foo: 'bar'
});
Then there's a lot of other cool methods in the framework, that are all designed to speed up development and modeled after the familiar ways of jQuery, more about that in the original blog post.
I completely understand not wanting to write a listener to each one because that is very time consuming. I had the same problem that you did and solved it like so.
var switches = [];
function createSwitch(i) {
switches[i] = Ti.UI.createSwitch();
switches[i].addEventListener('change', function(e) {
Ti.API.info('switch '+i+' = '+e.value);
});
return switches[i];
}
for(i=0;i<rows.length;i++) {
row = Ti.UI.createTableViewRow();
row.add(createSwitch(i));
}
However keep in mind that this solution may not fit your needs as it did mine. For me it was good because each time I created a switch it added a listener to it dynamically then I could simply get the e.source.parent of the switch to interact with whatever I needed.
module Id just for the hold it's ID. When we have use id the call any another space just use . and use easily.
Try This
var but1 = Ti.Ui.createButton({title : 'Button', id:"1"});
window.addEventListener('click', function(e){
var obj = e.source;
if ( obj.id == "1" ) {
// do some magic!!
}
});
window.add(but1);
I, think this is supported for you.
how do you create your tableview and your switcher? usually i would define a eventListener function while creating the switcher.
// first switch
var switcher0 = Ti.Ui.createSwitch();
switch0.addEventListener('change',function(e){});
myTableViewRow.add(switch0);
myTableView.add(myTableViewRow);
// second switch
var switch1 = ..
so no generic event listener is needed.