ember.js - Dynamic Navigation Bar in Ember -
I have an amber app where I'm trying a navigation bar to change the navigation items for different routes It helps.
Initially, I got the navigation on the application model using the lazy loaded navItems
property. But, now my first path is where navItems
no longer shows the need to populate the navigation bar item. Now, I am using such a render assistant:
{{render 'nav_menu' navItems}}
From there, I have the NaviMenu
template:
& lt ; A href = "#" & gt; Go to category & lt; / A & gt; & Lt; Div class = "dropdown" & gt; & Lt; Ul & gt; {{# Ish}} & lt; Li & gt; & Lt; A href = "#" class = "skip" {{bind-et-goat-gooto-getto salg}} dirty offset = "- 120" & gt; {{Name}} & lt; / A & gt; & Lt; / Li & gt; {{/ Every}} & lt; / Ul & gt; & Lt; / Div & gt;
And the scene looks like this:
class extends the App.NavMenuView amber. Tags: 'li' didInsertElement: - & gt; Ember.run.later (This, @InitiallyGame, 1000) InitializeGambi: - & gt; Gumby.init ()
Run is actually a hack because the idea of presenting the view before context is in the DOM (and to wait that it is
So ... how would I go about creating this so that the context of the nav_menu
view can be changed, so that I can update prices in routes (and then also to my DOM listeners Have a hook to put in the fire)?
About what I have done so far JSWN is created to know:
I have found a solution that really feels good when I was able to understand it.
Move this NavItemsController and extend it to Amber. Array Controller From there, add a supervisor who checks the changes of the content of the controller so that Gumby can be restarted. So that the scrolls work properly.
App.NavItemsController = Ember.ArrayController.extend ({contentHasChang Ed: function () {gumby.init ();} .observes ('content')});
Then, set an application path to listen for a changeNavItems
action:
App.ApplicationRoute = Ember.Route . Expansion ({actions: {changeNavItems: function (links) {this.controllerfor ('navItems') .set ('content', link);}}});
This allows navItems to be set because they either have a route (to handle initial or transition data events), a controller (to handle state state events) , Or view / components (for changes based on user input)
So, this is just a way to use the send
function in the controller, or see this In the case of, the work of index root will be:
P. Index = amber way. Extend ({module: function (model, transition) {transition.send ('changeNavItems', model.links);}});
First, to discuss the use of after module
: while setupController
this.send
Will be a bit easier since instead the code> can be used, it is not fit in use case here. setupController
can understand if the navber application is in-depth or requires the existence of the current root controller, but the index controller of the NAV bar has nothing to do with the state once the model Loads, then you can create a link.
using the transition.send
to trigger the action on the same running loop as either the transition or possibly after the loop (If you want to know about it) Once the action has started, no mailing action is found on the index root, so it bubbles up to ApplicationRoute. changeNavItems
is called and then it goes and sets the content
to NavItemsController loaded in the link variable in the link variable.
A complete work example can be found at
Comments
Post a Comment