I know that sitecore mvc dos't support RenderSection.
Is it any way to emulate it with Sitecore MVC ?
I just would like to have only required scripts for specific page.
Of course I can split it to 2 files and to View Rendering but it is seems not good way.
This is not something that you may do easily. It is all about creating appropriate html helpers for that. Here is previous StackOverflow question describing how to implement that:
Using sections in Editor/Display templates
Also this article may help you as well:
http://tomkamphuis.blogspot.co.uk/2013/04/sitecore-and-mvc-rendersections.html
What I did to solve this issue was to create add the following Placeholder in my main layout page (for me, at the end of the Javascript script tags)...
#Html.Sitecore().Placeholder("javascript")
Next add a Sitecore View Rendering that contains the Javascript...
#using Sitecore.Mvc
#using Sitecore.Mvc.Presentation
#model RenderingModel
<script>
$(function () {
// your javascript
});
</script>
This rendering then gets added to the Design Layout of the content item assigning it to the placeholder "javascript".
As a beginner with Sitecore, I'd be interested what others thought of this solution.
Related
this is probably a newbie Qs... i am using Sitecore 7 for my web application, and this is what i have so far
Data Template - this has only one field called "Title" to display page specific title
One Layout - this is pointing to my cshtml file under asp.net mvc project path. This has complete markup starting from Doctype. The title tag under head tag uses Sitecore's Html extension to render the field "Title" from template mentioned in #1. This also renders sitecore's View via placeholder called "page-body" under body tag of layout.
I have created a View Rendering pointing to Razor view in my asp.net mvc project. This view simply has h1 calling out hello world.
The Sitecore/Content/Home item (from sitecore's master tree) uses the template created in #1 and uses the layout created in #2. This item has one and only one Rendering created in #3
Now when i hit the root from my local sitecore website, everything looks good! I see Hello World in H1 tag under body tag with complete html makrup mentioned in layout...
This is where things starts getting complicated... Now i want my View Rendering (created in #3) to refer a CSS file which is specific to this Rendering only. This CSS will not be referred to all the pages. Of course I want to add the reference into the head as link href. So tried using asp.net mvs "Section" but i keep getting that sweet error "file cannot be requested directly because it calls the rendersection method..." So i realized that my view rendering doesn't have any #{Layout = "..."} and ofcourse which is controlled by sitecore engine!!
So i still went ahead and added Layout reference in my view Rendering's cshtml file and refer to the same layout file that Sitecore Engine would (i.e. #2 above). I still have same error.
Then i found a post Using sections in Editor/Display templates which is essentially for Scripts and tried implementing for CSS. But this didn't work either because View Rendering executes after the Helper in head tag gets executed so my CSS reference never go spit out in stream. BTW for Scripts this solution works perfect because scripts rendering helper is called after the Sitecore's view rendering.
At this point i am totally stuck for "How can i get my CSS ref for View Rendering in head tag". Any sitecore experts to help here?
So it's definitely a more advanced customization, but we do this using Cassette and a customization to the renderLayout pipeline. Use of this pipeline solves your issue of the helper in the head tag being called before your view renderings.
Extend the view rendering template (/sitecore/templates/System/Layout/Renderings/View rendering) and add a field that stores the name of a Cassette bundle you want to include on the page.
In your RenderLayoutProcessor, loop through all the page renderings (Sitecore.Context.Page.Renderings), inspect the rendering item for the bundle field (rendering.RenderingItem.InnerItem[YOUR_FIELD]), and call Cassette's Bundles.Reference.
In the header of your main layout, call Cassette's Bundles.RenderStylesheets().
You can also accomplish this without Cassette, but it makes the bundling, referencing, and inclusion of scripts and stylesheets much easier.
The other advantage to this approach is that it does not break Sitecore caching. Any approach which requires code to execute in your View rendering will render Sitecore HTML caching useless, because when the rendering is cached, your code will not execute and the page styling will be broken.
First my apologies: Im very new to ember.js and struggling so far.
I have a pretty basic app written and I've been using this as my main guide: http://trek.github.com/
My biggest issue right now is figuring out how to deal with Views, specifically the rendered HTML and where it appears in the DOM. It appears, at least with my app currently, the DOM elements are created and inserted into the page but right before /body. So everything just loads below the footer of my main site design.
Doesnt seem to matter where placement of the script templates are in relation to the page, or anything like that??
Is there a way to render views to an existing container div or something? Am I thinking about this wrong? Im used to working with jsRender where I have templates setup, but they typically rendered to an in-memory string that I then needed to insert into an existing container like $('#containerDiv').html(myRenderedHtmlFromATemplate);
Thanks for any help or guidance with this!
Ember will want its views to be hierarchical in the DOM so it can rely on event propagation. You probably noticed a <div class="ember-application"> that gets injected, and then all of your views are rendered inside of that.
You can specify the rootElement when you create your Application. The application will be created inside that element and leave the rest of the DOM untouched. If you don't specify that rootElement, then Ember will insert itself right before </body> as you observed.
Example:
window.MyApp = Ember.Application.create({
rootElement: "#containerDiv"
});
Without seeing code it isn't completely clear what exactly is going on, but, I do not see you mention anything about outlets so I assume that might be your problem.
Check out this url on outlets: http://emberjs.com/guides/outlets/
tuxedo25 has the best solution. If you are using StateManager you can also use the following:
App.StateManager = Ember.StateManager.create({
rootElement: '.content',
initialState: 'initial',
initial: Ember.ViewState.create({
route: 'initial',
view: Ember.View.create({ templateName: 'initial' })
})
});
I am currently in a situation where i need to remove the metamorph tags used in a ember js select box. I use a JS plugin that takes my select box and turns it into a styled select box which i have customized using css.
I currently have this ember js select box in my view.
<script type="text/x-handlebars" data-template-name="opportunities">
{{view Ember.Select
contentBinding="controller.filter"
optionLabelPath="content.metacode"
optionValuePath="content.description"
class="mydds opportunitylistcategory"}}
</script>
I just need a way to remove the metamorph code but for ember selectbox to still have binding etc enabled... I have read about removing metamorphic data with a jquery sortable but that hasnt helped me. Thanks in advance!
The best way to work around this is to use an Ember.CollectionView.
I've run into this issue with a simple unordered list (<ul><li>).
Here is an answer that demonstrates how to do it https://stackoverflow.com/a/11749736/701368
Edit
The original answer was for a version of Ember before 1.0.
I would recommend using the {{each}} helper with the itemViewClass attribute when dealing with newer versions of Ember.js. You can find the documentation here: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_specifying-a-view-class-for-items.
So don't use the block level helper; you want to use {{each}} instead of {{#each}}.
I'm trying to create a simple Ember.js app to learn more about JavaScript MVC frameworks. However, it appears applying CSS styles to a view template isn't possible (or rather, I am ignorant of the proper way to do this):
Without template
<span class="myClass">
Some value
</span>
In this case, the style appears properly, as expected.
With template
<span class="myClass">
<script type="text/x-handlebars>
{{MyApp.someVariable}}
</script>
</span>
In this case, the style doesn't seem to be applied at all.
I even tried something like:
<script type="text/x-handlebars>
{{MyApp.someVariable classToAdd="myClass"}}
</script>
Which creates an even more bizarre output (I can't even find that element in the Chrome developer element tab).
Online tutorials don't mention this issue and I have tried researching other Stackoverflow issues (there are some about applying styles but not exactly like in this situation). Can anyone enlighten me as to what I am not doing properly?
I normally use ClassNames and classNameBindings property of Ember Views. That get the job done most of the time.
You can also try Ember layout property to wrap the template.
Found answer to this question in jquery's append() documentation
You need to convert text into html using jQuery:
template = Handlebars.compile(..);
html = template(json);
$('body').append($(html)); // <- don't forget to wrap it
I'm a pretty experienced Grails developer, but most of my experience has been with using grails for serving up JSON/XML to a flex app and some relatively simple HTML websites.
I've been diving deeper into using the sitemesh integration in grails and I'm struggling a little to find best practices for some more complex configurations, and I'm curious if there are any good tutorials or examples out there. The original Sitemesh website isn't that useful as the tags it talks about aren't directly exposed in grails.
A google search is mostly showing old mailing list posts and some vanilla sitemesh stuff which is helping me to move a little further along, but it's a lot of trial and error.
I fully understand how the basic g:layoutTitle, g:layoutHead, and g:layoutBody tags work. Those are easy and well documented.
The kinds of things that I'd like to see examples for:
g:applyLayout - the documentation on this is weak and I don't fully understand the uses suggested in the main docs. How is this different than setting the meta name='layout' content='foo' property?
g:pageProperty - some better examples on how to pull and use properties into the main template by setting the values as meta tags in the page that's being decorated. The grails docs on pageProperty show only the onload attribute from the body being brought forward. I think you can also use meta tag values here as well, anything else?
can you use multiple levels of sitemesh layouts? My testing seems to make me think that I can't, but that seems to reduce reusability. I think that the answer here is some usage of the g:applyLayout, but that's where I'm struggling the most.
the g:pageProperty is a very powerful, but very poorly documented thing. Lets say in my layout I specify where to put some content like this:
<html>
<body>
<g:pageProperty name="page.header" />
</body>
Now in my page I can specify some content:
<content tag="header">
<!-- header -->
</content>
Sitemesh will take the content tag, regardless of actual position in the HTML of the page and place it where it needs to go in the flow of the layout.
Even better, if within my page I render a template that also specifies a content area with a tag of "header", it will overwrite the first declaration, and it will be the template's content that will be rendered in the final layout.
Well, I can answer a bit:
Your first and third questions are related, as you can't chain layouts using the meta tag.
Your final page should have a meta tag as you suggest, but if you want to layer a layout on top of another layout, you put a g:applyLayout tag at the top of the child layout, pointing at the parent.
In your edit.gsp, you'd have:
<meta name="layout" content="editTemplate" />
and in editTemplate.gsp, you'd have:
<g:applyLayout name="baseTemplate" >
<!-- the html for the editTemplate -->
</g:applyLayout>
so edit.gsp would use editTemplate.gsp, which would use baseTemplate.gsp as a base layout. You can chain those as needed.
I haven't used g:pageProperty at all, so I can't throw you better examples there, sorry.
The Sitemesh together with Grails is a very very powerful feature. The more I use it - the more I love it. You can decorate any part of our web site: you can have layout for error messages, tooltips, news lines, comments, etc, etc. Just to note that you can do even that with in your pages and have multiple levels of decoration (no <content> needed):
/view/layout/inline-error-message.gsp
<span class="errorMessageInSomeFancyBox">
<span class="errorIcon"></span>
<g:layoutBody />
<span>
/views/book/create.gsp
<%-- let's decorate our error message with some fancy box --%>
<g:applyLayout name="inline-error-message">${some.error.message}</g:applyLayout>
See our Rabbtor Showcase App for a few very good examples on
creating nested layouts
rendering templates
applying layouts to specific parts of a page
. This app is actually a showcase for our tool Rabbtor which enables using GSP outside Grails but parts related with Sitmesh are also valid for Grails.