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
Related
I want to add sharethis in emberjs templates.
After a lot of test i manage to make it work by adding the script tag inside the template itself.
<script type="text/javascript" src="http://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxx&product=inline-share-buttons"></script>
Is their a way to do it in a better way ?
I would like to add the script in the page header and to force rerendering of sharethis in the controller of my view after the rendering.
But i was not able to make it work in ember.
Note : i use ember 1.13
If you want a cleaner solution, you can check out this ember component:
https://github.com/webnuts/ember-cli-share-this
It'll add a share-this component which you can use in your templates like so:
{{#share-this}}
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
{{/share-this}}
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.
I am trying to upgrade a partially built UI to the latest Ember.js rc1 and it has turned into a very big rewrite job thanks to the dramatically changed API. Most info out there (and here) has been rendered useless. I've had to go through the documentation again several times to get things partially working but there are a lot of loose ends. Here is a biggie. The views do not update like they did under the previous version. I'm missing something that must have to do with rerender, {{outlet}} or something else that I'm not aware of. The ember guides seem to need updates.
The template is very simple:
<script type="text/x-handlebars" data-template-name="index">
<button {{action "addOne"}}>add one</button>
<ul>
{{#each item in controller}}
<li>{{item.title}}</li>
{{/each}}
</ul>
</script>
When clicked, the button adds a new element to the backed array. The console logs show that the array is growing, but the template does not change. Here is a jsfiddle to illustrate how far I've gotten. Can anyone figure out what needs to be added?
I modified your example to highlight the fact when we use arrays in Ember, that we are using Ember arrays (Ember.A() or Em.A() if you want to make explicit this fact). From my understanding, you can use the methods Em.A().addObject and Em.A().removeObject to achieve the basic functionality using the Ember.Object getter and setter methods, (i.e. .get() & .set()) .
In order be properly observed by the Ember application, it is important to use the Ember getters and setters.
A modified version of your fiddle.
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}}.
Quick question.
I found handling site navigation (not the routing aprt, just a simple nav bar) with ember.js a little complex.
So I thought I will just code this aprt with jQuery, push history into location url and hope that Ember.js will detect this change and the router take action.
Scenario :
1) ember.js will use a DIV for rootElement and the navbar is declared in the body.
<body>
<div id="nav">
<ul><li><a>Item1</a></li></ul>
</div>
<div id="rootEmberApp"></div>
</body>
2) then a jQuery script will be bound to the links (item1) of the nav div and push changes to the URL but preventing default action without stopping the propgation (I didn't want to reload all the scripts). Something like :
$(document).ready(function(){
$("#navigation a").click(function(event){
App.router.location.setURL('/ember/listItems');
event.preventDefault();
});
3) I was hoping that Ember.js will fire at this time and take action.
I didn't succeed.
Is it silly ? Any idea how to do that ?
Thanks a lot.
Update 1 : thanks for the answer. Yes you're right. I was just not fully pleased with the solutions I tried or found about a nav bar. I will look again the todoMVC example and its use of the CollectionView. From a beginner point of view, the CollectionView seems a good way to describe (declare) the View and at the same times it's not easy to read (it's easier when the view is written with pure html and the js is bound to it ala jQuery).
Thanks again
This will probably not be a satisfactory answer, but... this is not the Ember Way. A core concept of Ember routing is that once the app loads, the source of truth is in Javascript. As you move through an Ember app, the router transitions from state to state and the URL is updated as a side effect. You're trying to turn that on it's head. It's not impossible -- you can definitely get what you're trying to do to work. However, I wanted you to know that it goes against the intention the designers had in mind.