For example in AngularJS if you bind an ng-model to an ng-repeater, and your controller calls a service that updates the model, then the repeater is updated to reflect the change.
My question is, how does the view element (in this example, the ng-repeater) know to be updated?
For example, is there a timer that fires every couple milliseconds and updates the UI (unlikely)? Does the controller or view implement some type of internal event listener for all bindings and when the model updates, it fires a re-layout of the associated view elements?
When we write an expression ({{dyanvar}}), behind the scenes Angular sets up a watcher on the scope model, which in turn updates the view whenever the model changes. This watcher is like any other watcher we set up in AngularJS:
$scope.$watch('dyanvar', function(newValue, oldValue) {
//update the view with newValue
});
The second argument passed to $watch() is known as a listener function, and It is called whenever the value of dyanvar changes.
Your answer is in this article :
https://cfdeepak.wordpress.com/2014/09/29/how-two-way-data-binding-works-in-angular-js/
Related
I just searched the docs about using and implement the new Navigation Component, and I dont see or find a method to send data to previous fragment.
There is a feature request for this feature, you can star it:
https://issuetracker.google.com/issues/79672220.
But for now you can implement this using LiveData and ViewModel, First fragment will observe some LiveData object inside your ViewModel, second fragment will change this object value, and when you will go back to first fragment it will be notified that the value is changed.
Let me explain the my scenario. I am using ExtJS5. I have got a view component (let us name is viewOne) contain two combo boxes, button search and some action button, on click of search button the grid is populated. This viewOne is in a parent view component (viewParent). I need to load a second view (viewTwo) on selecting some grid row and clicking some action button a new view is loaded (viewTwo) in the parentView. When I come back from viewTwo to viewOne I need old values of combo boxes to re perform the search.
Currently I am storing the values of combo boxes in a store and set then when the after view render and call search. We have discarded card layout for this implementation.
I wanted to know how this can be done via Ext.state , I cannot find any example on the same that is close solution to my problem. Any other way of doing this ?
State seems reasonable for that. First of all you must set StateProvider (by calling Ext.state.Manager.setProvider) to instance of class which extends Ext.state.Provider.
Then state should work for you. Only thing that you must remember is to set stateful property to true and set stateId of the component.
Usually you don't need to save state by yourself. All built-in stateful components have defined state events. When such state event occur (eg. expand on panel) then state is saved automatically. You can customize state events by calling addStateEvents in initComponent.
To provide custom component state you should override applyState and getState methods. When you combine it with addStateEvents you have all what you need.
Example: http://jsfiddle.net/48jw81da/16/
I'm creating a Django/JQuery/MySQL application where I pass a composite data structure 'grid' as
return render_to_response('products.html', grid)
I render 'grid' into a set of UI elements ('td', 'button', 'div' etc. encapsulated in a HTML 'table'.
A typical use case:
User clicks on a certain UI element in the table
jQUery.click() is called which creates a inner 'input' tag for the clicked element.
User can add/modify/delete text from the element.
When focus is lost, jQuery.blur() is called which reverts the original properties of the clicked element such as removing input tag etc.
jQuery.blur() also calls a AJAX function where I do a .post call to send in user modified data back to a URL (function in view).
The called function in view then commits the new changes in database and returns a 'success' event back to web page:
tc_model_instance.update(tc_id=json_data['id'])
Through this use case, as you can see the changes are immediately committed to the database as soon as user eneters data and gives up focus on a particular element. Without using DB transactions in INNODB, how do I go about creating a View-Template association such that any changes in HTML template are asynchronously reflected in the model, but not necessarily written into the database.
A related question:
If possible I'd also like to create a event based bi-directional association between rendered template and my data structures as part of the view in such a way that any changes made either in web browser's UI element or associated view's data are always in sync. I plan to use AJAX for the most purpose. Not sure if forms would make sense in this regard.
Thanks.
You could probably throw a copy of the object into the session map and all posts alter that object instead of the DB directly. Then when the user presses a save button you'd fire off another POST command to the server that would then just call session['my_object'].save().
Note though that the session object is also saved in the DB, so if you are trying to avoid hitting the DB totally what I wrote above wouldn't help.
We are working with an application that uses prism and MVVM for healthcare tracking operations.
Within this application, we have registered views in primary regions, and scenarios in which clicking on a cell in a grid (in this case a xamdatagrid - Infragistics) will launch another region via the prism region popup behaviors constructs.
So, when we click on the cell, a cellactivation operation in the code behind for that view is called which then calls a method in the view model to .RequestNavigate to the view that is registered for the 'secondary' popup region (thus launching what appears to be a dialog over the existing application).
I am attempting to pass an object from the parent view (the values of the record in the grid) to the child view that is launched in the popup, and have found that none of the expected operations is working.
I have a mediator object that we are using to pass information back from children to parents, but this does not work the other direction because the publish/notify operations for the mediator require the child view to 'already' be instantiated before the parent publishes to pass that information.
I'm finding that the event aggregator structures built into the Prism.Events classes don't appear to be working either (I'm assuming because of the same publish/subscribe issues). I can publish an event through the event aggregator from the parent view and subscribe in the child view, but I have to launch the child view 'twice' in order to get the event tied to the event aggregator operation to actually fire.
I understand this is rather vague (minus the code), but I'm looking more for a start point, or anyone that's run into the same kinds of issues. The bullet point scenario is as follows:
Parent view already instantiated in existing region.
Clicking on cell in parent view instantiates (navigates to) child view in popup region.
Same click operation needs to pass an object from the parent view to the child view so that the child view can filter its own data based on that object.
Operations are constructed using Prism/MVVM.
Any help, suggestions, pointers, ideas would be awesome.
We had the same scenario and ended up with creating a UiService that are injected to our ViewModels. Our ViewModel base class has a SetModel method which the UiService calls when navigating, for sending parameters to the destination view.
By example:
Clicking a button in the existing View.
Source ViewModel calls UiService ShowView(data).
UiService calls RequestNavigate for the requested view.
UiService calls SetModel on the destination ViewModel (by accessing the DataContext of the requested view) to pass in the data from the source ViewModel.
Depending what you want to pass it can be pretty simple with INavigationAware
Sounds like you want to pass something like query string - parameters, etc. Code to open window will be like this:
var query = new UriQuery
{
{ "MailItemKey", this.SelectedMailItem.MailItemKey.ToString(CultureInfo.InvariantCulture) }
};
RegionManager.RequestNavigate(RegionNames.Popup, typeof(MailItemView).Name + query.ToString());
And inside MailItemViewModel which is our popup's VM code is like this:
public override void OnNavigatedTo(NavigationContext navigationContext)
{
var mailItemKey = int.Parse(navigationContext.Parameters["MailItemKey"]);
}
If you want to pass custom objects - it will be more complex. I would look for MVVM in the box samples - there is some code on how it's done. I had to re-work it whole lot and code is not really copy-pasteable.
Sounds like a perfect use of a RegionContext.
Parent view contains a region that can have multiple "child" views activated in it. They need to share some context or data. Set a region context and bind or pass whatever info all the "child" views in the Region will need.
See the Prism samples around RegionContext.
When writing GUIs, I've frequently come over the following problem: Assume you have a model and a controller. The controller has a widget W that is used to show a property X of the model.
Because the model might be changed from outside the controller (there might be other controllers using the same model, undo operations etc), the controller listens to changes on the model. The controller also listens to events on the widget W and updates the property X accordingly.
Now, the following happens:
the value in W is changed
an event is generated, the handler in the controller is invoked
the controller sets the new value for X in the model
the model emits events because it has been changed
the controller receives a change event from the model
the controller gets the value of X and sets it in the widget
goto 1.
There are several possible solutions for that:
Modify the controller to set a flag when the model is updated, and not react to any events from the model if this flag is set.
Disconnect the controller temporarily (or tell the model not to send any events for some time)
Freeze any updates from the widget
In the past, I usually went for option 1., because it's the simplest thing. It has the drawback of cluttering your classes with flags, but the other methods have their drawbacks, too.
Just for the record, I've had this problem with several GUI toolkits, including GTK+, Qt and SWT, so I think it's pretty toolkit-agnostic.
Any best practices? Or is the architecture I use simply wrong?
#Shy: That's a solution for some cases, but you still get a round of superfluous events if X is changed from outside the controller (for instance, when using the command pattern for undo/redo), because then the value has changed, W is updated and fires an event. In order to prevent another (useless) update to the model, the event generated by the widget has to be swallowed.
In other cases, the model might be more complex and a simple check on what exactly has changed might not be feasible, e.g. a complex tree view.
The standard QT way of dealing with this and also the one suggested in their very useful tutorial is to make the change to the value in the controller only if the new value is different from the current value.
This is way signals have the semantics of valueChanged()
see this tutorial
Usually you should respond to input events in the widget and not to change events. This prevents this type of loop from occuring.
User changes input in the widget
Widget emits change event (scroll done / enter clicked / mouse leave, etc.)
Controller responds, translates to change in the model
Model emits event
Controller responds, changes value in widget
Value change event emitted, but not listened to by controller
Flags to indicate updaing work. You can wrap them in methods like BeginUpdate and EndUpdate.