I have implemented an entry in SettingsFlyout control for settings pane. The page itself contains a dropdown. Whatever option user select from this dropdown need to be stored in roaming data store. Obviously this stored data need to be retrieved whenever user gets to this page in settings pane. I am not sure what’s the best place to write this code for data stage and retrieval? I see that SettingsFlyout object has onafterhide, onaftershow, onbeforehide and onbeforeshow events. Should any of these be used for this purpose?
[Windows.Storage.ApplicationData.Current.localSettings] (http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.applicationdata.aspx) or roamingSettings provide the builtin support for getting/setting setting key-value pair. It also handles the persisting to a file in application data folder. It also does required batching as per documentation.
you can find the reference code in the application data sample
var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
function settingsWriteSetting() {
roamingSettings.values['my setting'] = 'my setting value';
}
regards, events on the flyout - there events can be used to take some action before/after flyout is hidden - in the overall user flow. For example - I have once created a Promise around a signin flyout. afterhide was used to call error callback for the promise, with error as canceled.
Settings changed in a settings flyout should take effect as soon as the user makes the change rather than waiting until the flyout is hidden. I'd suggest treating your flyout as a page control.
Assuming your settings flyout was defined in settings/mySettings.html, create a JavaScript file named settings/mySettings.js and reference it in the head of your settings page. Then add the following code into the script file.
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/settings/mySettings.html", {
ready: function (element, options) {
// wire up event handlers for saving changes
// setup initial state
},
});
})();
Just like any other page control, you add event handlers and initialize the page in the ready function. If you are familiar with the navigation app template, it is the same.
Related
From the angular documentation, I can see that a value recipe can be used to store some information that can be injected in different modules. So I wanted to use this for storing some user related configurations in my angular app.
What I am doing right now:
Set a value by default-
app.value('display', {
header: true,
switcher: true
})
I have a header and switcher in my views that I want to show or hide based on the value of header and switcher coming from above assignment.
This part of display and hiding works fine. What I want is that if some controller changes the value of header to false, header should then be hidden for that particular user. So from within my controller I just set the values to false. But on page refresh, these values are gone.
I am not sure what is going wrong here. Are we not supposed to change the value? If not, isn't that just a constant. In case we are not supposed to update values, what would be a better way to store some user related variables that will be available to entire app.
First make a factory like
(function() {
"use strict";
angular.module('dataModule',[])
.factory('datafactory',function(){
return {
};
});
})();
Now datafactory can be accessed any where in application just you need to inject this module in required module and factory in required controller
use like this
datafactory.myReusableVar ="something"
later on in someother controller
$scope.myLocalVar =datafactory.myReusableVar
//using session storage
var x ="value"// x can be any data type string,array, or object
sessionStorage.setItem("mySessionItem",x)
$scope.mysessionValue =sessionStorage.getItem("mySessionItem")
The problem is that on page refresh the current context is lost (including all the variables), you should resolve your issue by storing the data inside your browser's localStorge.
check this module
https://github.com/grevory/angular-local-storage
First of all I know how to set a LoadingMask for a component but have a problem with the uncoupling of the system I am making so I am just looking for a hint/idea.
I am using a MVVC architecture and in the View I have a Container with several Components in it, one of which is a Grid.Panel. The grid is bound to a store and has an event that when fired calls a method of the store. The following code happens in the ViewController:
functionForEvent() {
var store = getStoreForThisGrid();
store.update(Ext.getBody());
}
What happens now is the update() method makes a request to a server, that updates the store itself and the view component, and I need the loading mask during that time. How I handle the situation right now is I pass Ext.getBody() (or a DOM Element representation of a specific component) to the method and it deals with that reference. This function part of the store that is attached to the Grid and resides in the Store:
update : function (el) {
el.mask();
makeRequest();
el.unmask();
}
What I am looking for is another way (Pattern maybe if such exists for JavaScript) to access the View component from the Store instead of passing it around because that does not seem like a good practice and couples the system.
Since I come from a Java background I would have used the Observer pattern but cannot find how to apply this in JS.
I want my app to fire a method (client side) when a particular subscribed data is changed? for example, the client side has this following subscription
Meteor.subscribe('thePlayers');
thePlayers subscription returns a collection of data which is being displayed in the html through the template.
so whenever the collection get changed, Meteor automatically change the data in the HTML also. Besides this feature, I want my app to fire a method say fire() to be executed as soon as data get changed. What should i do to achieve this?
As David Weldon correctly, cursor.observerChanges is the way to go. Here's how you can use it for your example (assuming your collection is called thePlayers):
client-side
methodCaller = function (methodName) {
return function (/* arguments */) {
Meteor.apply(methodName, arguments)
}
}
var fireCaller = methodCaller('fire')
thePlayers.find().observeChanges({
added: fireCaller,
changed: fireCaller,
removed: fireCaller
})
In case you need this fire() to be run on server, you don't need a method, you can just rely on the observeChanges feature or just observe in your publication. See this question to get an example of how you can achieve that.
In case you need this fire() to be run on client, keep in mind that every helper in your template is reactive, that means it will re-run each time your collection is changed. I assume that it requires that you use the subscription inside it, but that needs to be confirmed.
I have a jsTree which I am trying to bi-directionally "connect" to a Meteor collection. Right now I automatically trigger a jsTree.refresh() whenever the collection updates with the help of .observeChanges:
FileTree.find().observeChanges({
added: function() {
$.jstree.reference('#fileTree').refresh();
},
changed: function() {
$.jstree.reference('#fileTree').refresh();
},
removed: function() {
$.jstree.reference('#fileTree').refresh();
}
});
I want to allow editing of the database by dragging things around in jsTree. Here's how it would look:
User drags element to new location.
jsTree updates the location of the element in the tree.
jsTree calls event handler
Event handler updates database
My problem is, if I understand everything correctly, is that the database update would trigger the observeChanges event that I set up earlier. That would cause yet another refresh of the tree. That causes an annoying flicker which would interrupt users. (i.e. the file browser would be unusable for about 0.75s after every drag/drop operation.)
How can I prevent this unneeded update, or is there a better way to structure my interface with jsTree that would prevent this problem.
Have you seen this?
https://github.com/tobkle/meteor-jstree-example
https://github.com/tobkle/meteor-jstree
It looks like he/she is using autorun vs. observeChanges but is mostly the same concept as yours:
Template.showtree.rendered = function(){
var self = this;
var nodes = [];
Nodes1 = $('#tree1').tree();
Nodes2 = $('#tree2').tree();
if (!self.handle){
self.handle = Meteor.autorun(function(){
// refresh trees on new data
nodes = Nodes.find();
Nodes1.tree('option', 'data', 'Projects');
Nodes2.tree('option', 'data', 'Contexts');
}); //self.handle
} // if (!self.handle)
}
If this is something only a single user would be editing (at a time) then perhaps you simply don't refresh it based on DB updates, and leave the tree as an interface to author, only.
If it needs to refresh based on DB updates (from other users, or just to be in sync), you might consider changing your workflow/logic:
the changed.jstree event, updates the database locally, blocking
the autorun triggers the refresh in jstree
which should, in theory, only result in 1 refresh vs. 2 or 3
Or if you really want to limit re-draws... you could find the old parent node and the new parent node and only us refresh_node(obj) to refresh just those changes nodes:
refresh_node (obj)
refreshes a node in the tree (reload its children) all opened nodes
inside that node are reloaded with calls to load_node.
Perhaps this seems a bit backwards, but I have a view bound with Rivets.js for which I'd like the view to populate the model on initialization.
The usecase is that I'm using server-side rendering to return a snippet (the view) including rivets' data-attributes. So NO JSON is returned from server to client.
Now, by pressing 'edit' a user may put the content in 'edit'-mode, and start editing at will. (Using contenteditable, but this is out of scope here I guess).
So how to make sure the model is populated with values from the view on init?
I know that this question is a little outdated but I recentry tried rivets and I came across the same problem.
The solution:
// In your rivets configuration you disable preload:
rivets.configure({
templateDelimiters: ['[[', ']]'],
preloadData: false
});
// you bind your data
var binding = rivets.bind($('#auction'), {auction: auction});
// you manually publish it once to populate your model with form's data
binding.publish();
And that's it. I still don't know how to disable prelaod per bind
From the example on Rivets website (assign to 'rivetBinding')
var view = rivets.bind($('#auction'), {auction: auction});
doing rivetBinding.publish(); will bootstrap the model with values from the view for all bindings that have 'publishes = true'.
This question is old but it still has no accepted answer, so here goes:
You need to disable the preload configuration so rivets doesn't override whatever is in the input with what you have in your model at the time you do the binding. This can be done via the preloadData=false configuration, either globally (rivets.configure(...)) or view-scoped (third param to rivets.bind(...)).
After the binding, you need to publish the view (pull the values to your model). You also need to set up the observers via sync() call, otherwise your binded methods won't be triggered.
Using the same example as the previous answers:
var view = rivets.bind($('#auction'), { auction: auction }, {
preloadData: false
});
view.publish();
view.sync();