I'm trying to add the equivalent of rails' "flash" functionality in my backbone app, part of which involves putting a showFlash() at the top of each route in my router, and a purgeFlash() at the bottom.
Needless to say, adding those two methods to every route works, but it isn't the most elegant approach. Still, I'm struggling to figure out how to add hooks to backbone routers.
In short, I'd like to run showFlash() before navigating to any new page, and purgeFlash() afterwards. ...Any thoughts?
This plugin should do the trick:
https://github.com/angelo0000/backbone_filters
(not sure though if it works with the latest backbone version)
update - according to this comment it works with 0.9.2
Related
I am trying to make a simple form that slides to the right like this one used by DigitalOcean when you click on "Sign up using email": https://cloud.digitalocean.com/registrations/new.
The transition itself is pretty easy, what caught my attention is that they use 2 separate routes for this, the first one under /new and the other one under /email. These 2 seem to be separate pages and not just 2 different states to which a route is programmatically added, how can I do this in NextJS?
I believe the feature that you're looking for is shallow routing.
From the Docs:
Shallow routing allows you to change the URL without running data
fetching methods again, that includes getServerSideProps,
getStaticProps, and getInitialProps.
You'll receive the updated pathname and the query via the router
object (added by useRouter or withRouter), without losing state.
Note, however, that:
[s]hallow routing only works for URL changes in the current page.
See also:
next/router - router.push()
Dynamic Routes
This answer by #metaaa may also shed some light re implementation.
Best of luck and happy coding!
I'm implementing multi-language support in my app, and I guess this is the last thing that I would need in order to be able to change between languages without reloading the whole app/page. (I already have a solution with full page reload.)
For a simple example let's say this is how my router looks:
Router.map(function() {
this.route('search', { path: t('search') });
this.route('item', { path: `${t('item')}/:id`);
});
The t function would be getting the correct translation for the given strings in the currently active language.
The structure of the route hierarchy won't change, the only things that need to be updated are the path strings. Application state should be kept, of course.
I'm wondering whether this is possible to do.
I am not %100 sure about the correctness of what I wrote but Router.map is executed and resources with the definitions given within this method is transformed to a DSL instance and that is then passed to the actual router maintained by Ember.Router itself. In order to achieve what you want I believe what we need is dynamic modification to the router even if it is just the paths you need yo modify not the whole route structure.
If you look at the following github issue, Ember.js no more supports dynamically adding routes (hence no dynamic modification to the existing ones I believe). With all that said, I believe what you want is not possible without reloading the whole app (hence losing the application state).
I'm trying to make some proof of concepts, and learning the ember js framework concepts. I came across an issue, that is bugging me for hours... here's the thing:
I created a simple ember-cli app using the windows command prompt. Everything works fine, the default route get's hit and the application.hbs is rendered.
After that I added a blogposts.hbs to the templates, that has just static html:
<h1>Blog posts</h1>
<div>These are the blogposts:</div>
Also added a route to the /router.js
Router.map(function() {
this.route('blogposts',{path: '/blogposts'});
});
// -or-
Router.map(function() {
this.route('blogposts');
});
Tried both of the above. And added a linkto to the application.hbs that should link to the blogposts route.
<h2 id="title">Welcome to Ember</h2>
{{#link-to 'blogposts'}}Blogpost linkto{{/link-to}}
THE PROBLEM: this route seems like never gets hit. I tried to navigate to localhost:4200/blogposts, tried the link that's generated, I also tried the hash: #/blogposts, but none of these render me the blogposts template. If I understand it correctly ember should generate a default controller for the blogposts if I don't specify one, and also a model shouldn't be required to render that template. I know this has to be some minor thing that I'm missing, but I can't seem to understand where am I wrong.
Every helps is much appreciated!
Thanks!
PS. I almost forgot, I am using the following:
Ember : 1.13.11
Ember Data : 1.13.15
jQuery : 1.11.3
OK, just 5 minutes after I posted the question I got the answer! I was missing the {{outlet}} from the application.hbs!
It was not clear for me that the application.hbs is like a layout of some sort, and it will allways be rendered. I thought that based on the routes the application.hbs will be replaced by the blogposts, but it's not like that.
With the default routes in place the application template will be rendered first and the additional templates will be rendered to placeholder (the {{outlet}}).
I'm trying to understand all the logic behind routers and controllers in Marionette. As you can see below each example is using different approach to handle the triggering actions mechanism,so it's really hard to decide which approach should I be using.
example - link - this one renders the views from the APpController
example - link - uses Marionette.EventAggregator
example - link - uses the App instance to trigger all the actions.
It's also worth mentioning that most of them are 2-3 years old hence I'm asking my self whether or not use them in my app.
I have created a basic Marionette.AppRouter and Marionette.Controller inside my Marionette.Application instance. All the defined routes in my AppRouter module are working correctly. So I wanted to go further and update one of my views once the "#home" route is fired. But I was unable to do so, as after reading all the docs, it was still not clear to me how to update all my views from the AppController?
Should I use EventAggregator for all the communication between AppController and Marionette.Applicaiton ?
Should I define my LayoutView including ItemViews..etc in my AppController ?
Or should I just pass an instance of my App to AppController?
I' would be really glad if someone pointed me to a simple, up-to-date (AMD) example.
The newest way is Backbone.Radio. It will be the default event manager in the next big version of Marionette. You can shim it into the latest version and use it today.
Personally I decided on using Radio together with a custom made router. There are conflicting opinions on how to organize everything but I kept both radio and the router outside of the scope of Marionette.Application (window.radio, window.router, window.app). It works well and can be another viable option.
I'm stuck in the 'Scrumptious' bookmark app created in a Tuts+ Course called 'Let's Learn Ember'. As the course is some months old, I'm trying to re-do the app using the most updated versions of Ember.js and Ember-Data.
Here's the repo: https://github.com/jantequera/scrumptious
NOTE: due to #claptimes request, I've added a jsbin of the project: http://jsbin.com/ukuDORUZ/2/edit?html,js,console
The thing is, that in the 'bookmarks' template, when I add a new bookmark, it is stored and the "create Bookmark" partial disappears, but the bookmarks table isn't updated, and it doesn't even reflect the changes in the newly created bookmark on real-time, which is the intended behaviour. In other words, I have to refresh the browser in order to see the new bookmark in the table, which is not the way an ember.js app should work.
As I am learning Ember, I might have missed or misunderstood something in the guides that explains this, so any help is welcome. Below I expose the code, if you wish to see it in context or even try it out, use the repo above. Thanks!
EDIT Anton below pointed out and advised the usage of components, which make the jsfiddle above work. However, when I use this solution in my local copy, it wouldn't work UNLESS I use the FixtureAdapter INSTEAD of the LSAdapter (local-storage). Any clue?
http://jsbin.com/ukuDORUZ/6
You use "render" helper:
{{render "table" controller.regular}}
model is not updated in "table" template when you create new bookmark and update controller.regular
you can use component (http://emberjs.com/guides/components/) and bind your model to component's parameter:
{{bookmarks-table elementsBinding="controller.regular"}}
http://jsbin.com/ukuDORUZ/6