I have in my app many value converts and custom element serving all the app.
resources/value-converters/1.js,
resources/value-converters/2.js,
resources/value-converters/3.js,
resources/elements/1.js,
resources/elements/2.js,
resources/elements/3.js,
Is there a way to register all the converts and the elements to global resources in one command? I mean not adding them manually one by one with the global resource.
Thanks...
Related
I am trying to iteratively replace .cshtml razor views with what I wanted to call Vue "mini-apps". Which should be somewhere in between a micro-frontend and a classic SPA. The aim is to share some of the code base, mainly dependencies. Compile a common chunk-vendors.js and have the "mini-apps" as separate javascript entry files to place on appropriate views. As performance demand would grow, I would progress into splitting chunk-vendors.js and optimize via lazy-loading.
The problem I am hitting here is trying to make two root Vue instances talk to each other through a shared state. Right now only the app that is imported/mounted first stays reactive. I thought that my problem was in the Vue 2 reactivity system/how Vuex binds itself to a concrete Vue instance here. When I implemented a primitive store, the situation ended up being exactly the same.
What confuses me about this is that if I were to instantiate two applications in a single main.js entry file, the store sharing would just work. Which suggest that Vue is either creating some kind of hidden root instance or that my Vuex code analysis deduction of it binding to a concrete instance was incorrect.
I would highly appreciate it if someone could tell me why this can't work, optionally suggest a workaround?
I have created a reproduction both in Vue 2 with Vuex and in Vue 3 with composition API/primitiveStoreImplementation here.
Vue-cli is building the app in an MPA mode with pages specified in vue.config.json, then imported in the root index.html file. The store is initialised once and saved for later check/loading on the window object. In the context of asp/razor I would have webpack set up to remove the redundant files, only leaving javascript bundles. Also, the dev proxy would proxy everything except the path to the script bundles. All of this is removed for the sake of the demonstration.
(once I find a solution I hope to replace the source link with specific code snippets)
Options considered:
I am trying to avoid it, but I might have to always run a "coordinator" root instance that will check the presence of certain elements on a page and load/unload the "mini-apps" as components using something like portal-vue when needed. That coordinator would also contain a state with modules, some of which would be marked as "shared" thus operations from multiple "mini-apps" would be allowed (ownership flag check).
I have considered sessionStorage/localStorage, the problem is that the 'storage' events are only triggered across tabs and not within one document first |Note. I would have to trigger a custom event or play around with iframes. Feels too hacky, but that might be an axiom here. It would also duplicate the same state across many store instances.
These are some relevant articles I have found on this topic:
Probably closest to what I am trying to achieve:
Using Vuex with multiple Vue instances
Same but different:
Build Vue microfrontend app (with routing and vuex store)
The use case for multiple entries are sub-apps that don't coexist on the same page, although they can. They could be web components or regular app bundles. They can even interact with each other but they need something else for this - global event bus or a mediator app that passes data between them.
The problem is that there are more than one Vue library copies and/or more than one Vuex store instance. In order to avoid this, they would need to be precisely loaded only once on the page and reused between apps, i.e. vue and vuex are loaded as CDN libs, possibly used as Webpack externals to use window.Vue and window.Vuex transparently for respective import. Not only Vuex but store needs to be a singleton on the page (basically a said mediator). This is acceptable solution but primarily suitable for existing applications that have design restrictions and need a workaround.
I am trying to avoid it, but I might have to always run a "coordinator" root instance that will check the presence of certain elements on a page and load/unload the "mini-apps" as components using something like portal-vue when needed.
This is the common way to do this. Vue 3 has teleports that has give less control than portal-vue. It has no downsides for application design if done properly. The same thing is achieved similarly in other frameworks (Angular, React) as well, where portals appeared earlier.
I have considered sessionStorage/localStorage, the problem is that the 'storage' events are only triggered across tabs and not within one document
This is solved by using window postMessage and message event in the same tab. In case this shouldn't be limited to a single window, there are third party libs that use both for cross-tab synchronzation, a native alternative is BroadcastChannel that has less browser support than LS but doesn't have its limitations regarding tabs.
Is there a way to add Validation to a property on my VM "dynamically" (i.e. sometime after I register the initial rules on the VM)?
Currently, I'm registering the rules in the constructor of the VM, then a little while later, after the user has entered a bunch of data, I need to show a new field (using if.bind) and want to add validation depending on the result of a web api call..
Wondering if there's an API for this that I've missed?
You can achieve it without dynamically adding rule but instead you can use satisfiesRule and when, see it here in section Conditional Validation. satisfiesRule will only evaluated if the property that attached to it is already pass.
when will only evaluated the rule if the condition is true.
Additional link.
If you're using bootstrap, you can find this useful.
in my WP7 application I have a listbox containing an image. I include several images within my application, but if an image is not found it should be retrieved from internet and then of course be stored in Isolated Storage. Now i have 1-2 questions:
1) On initial application start, should I copy all images into IsolatedStorage so that Isolated Storage contains all images (and therefore the images from images-folder of application are availabe twice: In application image directory and in isolated storage)?
2) Is it possible within the listbox to display images in one case from IsoloatedStorage and in the other from application file directory?
many thanks!
P.S. Code examples are welcome, especially in vb.net.
1 - No. Why waste time and storage?
2 - Possible solution - write a class that implements IValueConverter. In your Convert method, if the value is Uri with IsAbsoluteUri=true and Scheme="isostore", you read the file from isolated store, and return a BitmapImage, as described here. Otherwise, you just return unconverted value from your Convert method. And, you specify your converter in the binding.
Sorry I don't have code examples to share.
P.S. For your task, I'd recommend a 3-rd party lib called "Kawagoe Toolkit". The only drawback is the license that obliges you to mention them in your about page. If using Kawagoe, you could just define a property "imageSource" returning object, and return either Uri for images from resources/XAP, or delay loaded ImageSource object obtained from Kawagoe's ImageCache.Default.Get() method, which will eventually load itself from either isolated store of the Internets. They already have the downloading and caching code you need.
Yes, u'd better copy them to unify location.
What for ? Just show images from IsolatedStorage. Initial images are copied there, and new images are downloaded from internet and put to IsolatedStorage (of course u'd have to write this code).
I need to implement a custom event handler, which should for example handle URIs like:
- SomeAppName://SomeDomainClassName/ID to fetch a record from a database table
or
- SomeAppName://SomeControllerName/PushView/SomeAdditionalOptions to push a view controller and set additional options, for example this could be a calendar view which should be focused to show the calendar at a certain date.
I have been searching for existing REST frameworks, but so far I didn't figure how any exising framework could allow me to define formats for URIs and map them to local classes, actions, whatever it will be.
How could I 1) define and interpret REST like URIs and 2) map them to local actions or objects, without reinventing the wheel (e.g. inheriting from RESTKit)?
Or should I end up to write my own parser? In that case, pointers to good REST like URI lex/flex are welcome.
What I was looking for is called an URL router in Ruby worlds. There exist a few also for Objective C, more or less useful.
I ended up to write a custom URL Router, that is like ruby URL routers just split into basically two components (router and route). For the Router part (the mapper and URL dispatcher so to say) I looked at TTURLMap, which is part of Three20, but threw away 90% of code and changed the action handling to fit my needs. It has lot's of boilerpate code, but basically was what I needed for getting an idea for the router.
For the particular route handling I use SOCKit, which seems great and has well tested code.
Now I can for example have a local function hello which takes two params to show some values passed as URL:
Roter *router = [[Router alloc] init];
[router map:#"soc://:ident/:saySomething" toInstance:self with:#selector(hello:sayWhat:)];
[router dispatch:#"soc://3/hi"];
I'll add blocks as well, but for most cases selectors work well, because SOCKit passes them the actual values for basic parameter types (no need to use parse the dictionary with values from the URL).
In the past, I created my stores using Ext.create('Ext.data.Store', ...
and when I wanted to load data the was contained in a JSON loaded object, all I needed to do was MyStore.loadData(myDataObj);
This does not work with the stores you define in Sencha Architect, you get Not defined error for loadData.
I have a custom Ext.Ajax routine I use to get the data that does not lend itself to being defined in a stores proxy. My data is in the proper JSON format, but I have had no luck finding a way to force load data into a store without using a store proxy.
I was able to get MyStore.add({--json string ...}) to work, but this only adds a single record.
Why is store.loadData() not suppored ??? What can I use instead???
use store.setData assuming you are using a Touch project.
I have read the Sencha API docs. The issue here is that the Store.loadData does not appear to be valid (ie Un-defined) when referenced in a user defined function in Sencha Architect. I have not been able to find a way to take a variable that has a valid JSON object and load it into s store. The only method I believe would work is if I created the stores in a function, but that would defeat the awesome UI the architect provides.