Is there a way of having partial views that does not reload when I change click a link in Sitefinity?
I have this template and I want to keep header, menu and footer and change only the content.
<div class="sfPublicWrapper" id="header">
#Html.SfPlaceHolder("headerPlaceholder")
</div>
<div class="sfPublicWrapper" id="menu">
#Html.SfPlaceHolder("menuPlaceholder")
</div>
<div class="sfPublicWrapper" id="content">
#Html.SfPlaceHolder("contentPlaceholder")
</div>
<div class="sfPublicWrapper" id="footer">
#Html.SfPlaceHolder("footerPlaceholder")
</div>
Any idea how to achive this?
After trying different template setups I came into the conclusion it´s not possible with the MVC based templates to have fixed parts of the page that will not re-render after clicking on the menu. There are some implementations that can optimize how the page render and how the cache is managed.
https://www.progress.com/documentation/sitefinity-cms/administration-cache-settings
Template best pratices
https://www.progress.com/documentation/sitefinity-cms/custom-themes-and-templates-preparing-your-work-environment
bundling and minification
https://www.progress.com/documentation/sitefinity-cms/administration-enable-asp-net-bundling-and-minification
Related
<div class="ui form segment">
<div class="field">
<div class="ui selection dropdown" tabindex="0">
<div class="default text">
Select
</div>
<i class="dropdown icon"></i><input name="hidden-field" type="hidden">
<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>
</div>
</div>
</div>
this code is written inside a template.hbs(handlebar) file.
I want to initialise the drop down with the following command
$('.ui.dropdown')
.dropdown();
where could I write the second code?
if it was an html/php file I could write inside the template
Short answer, you don't.
Long answer:
If you are developer who takes any pride in his work and doesn't want the next maintainer to fantasize about drowning you in dirty toilet water, you should create a dropdown component. This component seems small in scope and would look something like this:
{{dropdown-list options=listOfOptions onOptionSelect=(action "someAction")}}
You pass in the options, convert:
<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>
to:
<div class="menu" tabindex="-1">
#{{each options as |option|}}
<div class="item" data-value="{{option.value}}">
option.displayName
</div>
{{/each}}
</div>
where each options is [{displayName: "Option 1", value: 1}...]
Inside of the javascript part of the component, simply execute the above code from within didInsertElement which the docs describe:
After a component successfully renders its backing HTML element into the DOM, it will trigger its didInsertElement() hook.
Lastly, inside of the component, bind listeners to the dropdowns native events. One such function, the one for the dropdown's select action, should call this.onOptionSelect(whateverTheSelectedValueIs). This allows you to define actions differently for each dropdown.
I highly recommend you take a moment to read this section of the docs
Writing Ember requires a different mindset than writing backend rendered html + jquery style applications. You want to really decouple your javascript code from the DOM as much as possible and focus on values + data down/actions up. Components are the correct place to bind to native javascript events and integrate with 3rd party addons. Doing so effectively isolates the DOM interactions and provides a nicer api to the rest of your application. If you were to just use the routes renderTemplate hook to execute the .dropdown() call, you require every developer to remember to call dropdown any time you want to use a dropdown and have done absolutely nothing for reusability and just hacked your way to a solution. Don't be that guy, do it right :)
TYPO3 website is using TYPO3 extension of Smarty.
In one existing template called header.tpl I have this code:
<div class="header">
...
</div>
<div class="nav">
...
</div>
Is there some way to hide div element with the class "nav" using if condition? This header.tpl is used on every page, but I want to achieve that only on page with id=3 (in TYPO3) the navigation part will be hidden.
For example:
<div class="header">
...
</div>
{if (???) }
<div class="nav">
...
</div>
{/if}
Thank you very much for your help.
If you use the TYPO3 extension of Smarty, there are special plugins that give you the possibility to access data from TYPO3.
You can find them here: https://github.com/rtp-ch/smarty/tree/master/Classes/SmartyPlugins/Frontend
I'd say to use {if $data.uid == 3}, but I also need to see more of your setup to be sure.
I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.
I have a 3 column layout in my app. I'm using Semantic UI. So, the layout is:
<div class='ui celled grid'>
<div class='left column'>...</div>
<div class='middle column'>...</div>
<div class='right column'>...</div>
</div>
So, straightforward.
In my application.hbs it is simply:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
{{outlet}}
</div>
And the other 2 columns are in my sub-controller/templates. And this works fine until I need a View. If I need a View, then Ember makes the HTML layout become:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
<div class='ember-view'>
<div class='middle column'><!-- content --></div>
<div class='right column'><!-- content --></div>
</div>
</div>
And the wrapping <div class='ember-view'> breaks my layout. Because I don't always need a View I need a way to make the HTML the same for with or without a View.
At this point, I see 2 solutions. I'll either have to rework my layout in some way (that I'm yet to work out). Or I can get rid of the wrapping div.
But is it possible to get rid of the wrapping div? I tried this:
export default Ember.View.extend({
tagName: null
});
But that doesn't work. I also tried a span, but that still breaks my layout.
Any ideas?
Thanks.
Try using
tagName:''
The empty string as the tagName's value on your view.
Update:
When I brought this to the attention of ember.js contributors, they suggested inheriting the view from
Ember._MetamorphView
https://github.com/emberjs/ember.js/pull/4790
This is solved since Ember 1.8 with the HTMLBars engine.
I would like to bind a css style in a template. What would be the
solution ?
I tried this:
<div class="bar" style="width:{{barWidth}}px"></div>
but DOM element look like this after its been rendered:
<div class="bar" style="width:<script id='metamorph-28-start' type='text/x-placeholder'></script>5.000000000000002<script
id='metamorph-28-end' type='text/x-placeholder'>px">
Obviously here we can see that the tag for metamorph was
added within the style attribute...
I'm wondering what is the best way to achieve such things with
Ember.js
There is something i don't get yet.
I have a template as follow:
<script type="text/x-handlebars" data-template-name="listTemplate">
<ul id="list">
{{#each App.list}}
<li {{bindAttr data-item-id="itemId"}}>
<div>
<span class="label">{{itemName}}</span>
<div class="barContainer">
<div class="bar" {{bindAttr style="barWidth"}}></div>
<div class="barCap"></div>
</div>
</div>
</li>
{{/each}}
</ul>
i'm in a for each loop that loops thru my ArrayProxy content... and the bar width vary depending of the value of each item in the list. Your solution here will not work as the view is the UL and i need a barWidth per model item. and I do not want to polute my Model with css related things like "width: ###px"
Is there any other elegant way to solve what i try to do ? maybe it would be radically different. I'm very new to ember.js and try to discover the best-practices yet:)
Set a string on your view that looks like "width: 100px" and then bind it to your div with the bind-attr helper like so: <div {{bind-attr style="divStyle"}}>Test</div>
http://jsfiddle.net/tomwhatmore/rearT/1/
To simplify all that, I created a tiny handlebars helper for emberjs that allows you to bind any style properties. You can look at https://github.com/yderidde/bindstyle-ember-helper
Add unbound:
<div class="bar" style="width:{{unbound barWidth}}px"></div>
In Ember 2.0:
<div class="bar" style="width:{{barWidth}}px"></div>
will just work.