I have navbar component which I have placed in an application.hbs so that it should be visible always.But I want to change the title of the navbar with each page I visit ( say I am on index page it should say "Home" , if I am on profile page it should say profile,etc).Right now what is happening is navbar title always remains "Home" for all the page.This is happening because the navbar gets rendered onlu during the time it loads the page in browser and after that it doesn't change according to page.
application.hbs
{{top-navbar dp_url=model.profile.dp_url first_name=model.profile.first_name title=title}}
{{outlet}}
Here the I am computing the value of title depending upon which page the user is.
application.js(controller)
if (currentPage === "" || currentPage === "#"){
currentState.set('title',"Home")
}
else if(currentPage === "Userprofile"){
console.log('myStudio');
currentState.set('title',"UserProfile");
}
In here the currentpage has the current url of app and I am comparing it and deciding the value of title for navbar.
But the top-navbar title value gets calculated only for the first time when user load the app in browser and not when I move ffrom one route to another.
I have also tried the Ember.Evented but not able to solve it.
I don't know what Ember.js and Ember-data version are you using, currentState is deprecated since 2.1, anyway looks like you're using a private method intended for Ember internals and not meant to be used in an application.
A possible (but maybe unnecessary complicated) way to accomplish what you want is:
Create a model with the information you want to mutate in the navbar (e.g. navbar-data).
In the route where the navbar is rendered, create and return a record for it using a fixed numeric ID (e.g. store.createRecord('navbar-data', { id: 1, title: "index" })).
Pass the created record to the component (instead of just a string).
Whenever you want to change, peek the record with store.peekRecord('navbar-data', 1) and change the value you want to change in the navbar.
Of course, the record you use for that must not be saved with record.save().
Related
Summary
I want to continue to use nested routes but without displaying top level content when the nested route is accessed. I'm not sure this is possible ?
Detail
Initially my requirement was to to display a list of, eg, foods and offer the user the option to add a food item foods/add . Using the outlet tag at the top of the list template allowed a form to add a food item to become visible at the top of the list, transitioning back to food after the add resulted in the list being displayed without the form.
New Requirement
The requirement has now changed and it's necessary to show the form without the the contents of the list and after a succesful add show the list without any form.
Question
I know I could abandon the sub-routes approach and create a route such as food-add but is there any other way of preserving the sub-route (and the corresponding file structure, which I like) but allow the the template for foods/add to be rendered without the list content ?
Each route has an index template which is only visible when a child route is not present.
You could do something like this:
index.hbs
{{#each foods as |food|}}
{{food}}
{{/each}}
<LinkTo #route="food.add">Add</LinkTo>
food/add.hbs
<form>
...
</form>
{{!-- submitting this form would add the new food to the list of foods
and then also transition back to `food` --}}
Here is some more info on how the index route works
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_nested-routes
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_index-routes
This Ember template code...
<div class="detail bedrooms">
<span>Number of bedrooms:</span> {{rental.bedrooms}}
</div>
<div class="detail temperature">
<span>Current Temperature:</span> {{city-temperature location=rental.city}}
</div>
...results in this rendering...
How could one get the "25C" text to render on the same line as "Current Temperature" in the same way that "San Francisco" is on the same line as "Location"?
I have tried getting the city-temperature component to return only text, but (secondary question here) is it even possible for a component to return only text if the text is from a remote ajax request since the promise seems to need a DOM element to append to?
This Ember app is available here on GitHub. It's a modified version of the official Ember.js tutorial app with this "Current Temperature" detail added.
The problem is that; city-temperature is a component; and by default ember components is assigned div as their tags. Due to this; the content of city-temperature starts at a new line.
What can you do? Play with css and make sure div tag of city-temperature does not start at a new line; but instead floating right within the owner div. The second option is making city-temperature component tagless; so that it does not start at a new line. To achieve that; you can just declare:
tagName: ''
within city-temperature.js. You can see the following twiddle to see the second option I mentioned.
After reading your comments; I have forked your repository and made minor modifications to achieve what you want. You can check my repository and my corresponding commit to see what I changed.
Basically; I really did not like the idea that weather service is returning a DOM element. I have changed it to return an instance of ember promise (I mean Ember.RSVP.Promise). Within city-temperature.js I just set a retrieved weather value from weather service and set it to the component instead of making DOM modification. Finally; I modified city-temperature.hbs to render weatherValue and added a simple css item in order to prevent weather-container div to insert a new line break.
I am not sure; whether you will like my solution or not; but I guess you will retrieve the visual appearance you want. You can always rely on promises for async tasks; you do not need to create DOM elements and pass them around to components and append them to somewhere within DOM tree of the corresponding component. I believe one of the reasons we are making use of a framework like Ember is to prevent such DOM modifications. Best regards.
An ember component adds a div by default. If you don't want to add this div tag, you need to set tagName to an empty string.
That's called tagless component.
Further, for your case, you can give a tagName='span' so you will not need a span in your template.
export default Ember.Component.extend({
tagName: 'span',
classNames: ['weather-container'],
weather: Ember.inject.service(),
//rest of your code...
});
In Oracle Apex, I am currently creating a form. Within the form there is a checkbox item that shows a LOV. One of the options is labeled 'others'. The goal is to have a text box appear when 'others' is checked. I am unsure on which dynamic action to use for this situation. Could someone help me with this?
If built in dynamic actions in apex wont give you results, you can always patch it up with a jquery or javascript in the main page.
In the main page under javascript>excute when page loads, try this code
$('#P2_NEW_CONTAINER').hide();
$('#P2_NEW_1').click(function(){
if ($v('P2_NEW_1').indexOf('2') != -1) {
$('#P2_NEW_CONTAINER').show();
}
else{
$('#P2_NEW_CONTAINER').hide();
}
});
where
P2_NEW_CONTAINER is the id of the container of your textbox/textfield.it always end with _CONTAINER;
P2_NEW_1 is the id of your checkbox and;
"2" is the return value of the "others" check box
Create text field lets say P1_textthen create a dynamic action with the following options:
Event=Change
Item=P1_Your_Check_Box
Condition=In List
Condition Value=others (the return value of your P1_Your_Check_Box when
others is checked)
True Action=Show
Uncheck Fire On Page Load
Affected Elements>Items= P1_text
False Action=Hide
Affected Elements>Items= P1_text
Check Fire On Page Load
Sitecore 6.6 Update 4
We're using CustomItemGenerator 1.0 and I was using this to help build a primary navigation menu for a site. This worked as expected and everything was rendered properly.
My problem is when I attempt to edit the menu via Page Editor; I don't even see the menu.
I use a repeater and repeat over a list of links to include in the nav. Due to the way the HTML was created, each LI element needs to have its own, specific ID ("Nav Id" Field in Sitecore) that ties into the CSS. Code inside of my repeater's ItemDataBound event:
// Cast the item using CustomItemGenerator-generated class
GenericContentPageItem navItem = (GenericContentPageItem)e.Item.DataItem;
liMenuItem.ID = navItem.NavId.Rendered; // I tried "navItem.NavId" by itself as well
So while this renders properly in the browser, it doesn't when I'm in Page Editor:
<li id="<input id='fld_B72EB6696DCF41A49671972D5EA5DEB8_2163B90C08AB4A18970A7F3ECE79DCFC_en_1_f71bd37d18d146c19e222e89fcffe278_3' class='scFieldValue' name='fld_B72EB6696DCF41A49671972D5EA5DEB8_2163B90C08AB4A18970A7F3ECE79DCFC_en_1_f71bd37d18d146c19e222e89fcffe278_3' type='hidden' value=" Home?="">
... instead of it rendering like this:
<li id="Home">...</li>
Now, that having been said, I can change my code to not use the CustomItemGenerator and it works fine in the browser and Page Editor as follows:
GenericContentPageItem navItem = (GenericContentPageItem)e.Item.DataItem;
Item nav = Sitecore.Context.Database.GetItem(navItem.ID);
liMenuItem.ID = nav.Fields["Nav Id"].ToString();
I would like to avoid having to hardcode field names in my code, which is why I am using CustomItemGenerator. Is there something that I'm doing wrong with my code that it doesn't want to work in Page Editor?
Thanks!
If you need the actual value out of the field regardless of if you are in the page editor or not, you want to use the Raw property:
liMenuItem.ID = navItem.NavId.Raw;
I am trying to use flowplayer's overlay to load an external page that has a django form built in.
However the overlay loads the page but the submit button simply refreshes the page.
How do i actually submit the values entered in the form?
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
effect: 'apple',
closeOnClick: false,
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
<div class="bananas">launch</div>
my view boom has a model form.
Without seeing the actual view code, it's hard to give a helpful answer. In the future, please be sure to do so...
If you don't have the overlay programmed to redirect to the page, then submitting it to that same url might process/save the data without you noticing. Is the data being saved, or does absolutely nothing happen when you click 'submit'?
Generally, this is how it works: you need to be posting to a url, defined in urls.py, that points to a view function in your views.py. (These names are merely convention, and can be called whatever you like) You mentioned that you have a view named 'boom': is it defined in your urls.py like this?
url(r'^path/to/boom/$', 'model.views.boom',),
Check that this is defined and that your form is posting to it.
The view must then contain logic to process the request and return a response. Posting to that url will transfer a cleaned_data dictionary of form variables that can be accessed over the field names defined in the form. It looks like this: x = form.cleaned_data[x]. Check the form for its validity with form.is_valid(), and then do your processing. This can involve saving objects, running arbitrary code, whatever you wish.
To find out more, be sure to read the excellent documentation.