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

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

lua - HowTo create a fuel bar -