I am using coffeescript with react-rails gem. In the measure.js.coffee, there is no span present in the coffee code, but when the HTML is getting painted a mysterious ghost span is appearing. Below is a screenshot of code and HTML generated by it.
In my code, there is no span in between carousel-mImages and mtag-images. Is it because of the reactCSSTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)
Yes, ReactCSSTransitionGroup is a wrapper around ReactTransitionGroup.
And from the official docs here:
By default ReactTransitionGroup renders as a span.
You can change this behavior, and render as another type of component, but this would mean you have to manually configure and render the ReactTransitionGroup.
This may save you one wrapper element in the DOM, but this depends on your component tree structure.
Related
I've encountered an issue with ember's (app is on 2.6.0, but seems to happen in latest as well) rendering process and its compatibility with the MathJax.js library. I have an ember twiddle (linked below) that isolates the problem, but essentially it seems like MathJax's rendering of inline equations that occur in the middle of a single text node breaks ember's re-rendering, in that the single text node becomes multiple text nodes after MathJax transforms the inline equation text into its Math elements, and the 2nd text node becomes orphaned, and remains in the DOM across re-renders.
https://ember-twiddle.com/cadfb80d7c90df98353cc3d9900f2b73/1ab7f66c3c6ca4aad15bf443bbe02fbb1f79a0d4?openFiles=controllers.application.js%2C
It may just be that my integration of mathjax with ember is just not correct, so I'd love some pointers if thats the case.
I was able to fix this with a somewhat hacky workaround:
https://ember-twiddle.com/cadfb80d7c90df98353cc3d9900f2b73
The issue (as confirmed on slack by some ember core team members) is with how MathJax modifies the DOM, in that ember is not able to keep track of the extra nodes it creates, and as a result can not properly clean up after it on re-renders.
To solve this, the component which contains the mathjax content manually sets its element's innerHTML to whatever the content attribute is set to when didRender() is fired, effectively wiping out all the DOM created/modified by MathJax. MathJax's rendering process is then invoked to render any formulas in the newly rendered content.
Note that if your content does not contain any HTML, it is recommended to set element.innerText instead of element.innerHTML.
I have a weird issue using Ember 1.11 (built with ember-cli) and D3 Pie chart.
The chart is not displayed properly on ember routes, only on the index route (index.hbs).
The generated HTML code is the same on routes templates and index.hbs. I've used the same view/component on index.hbs as on routes.
Weirdly enough, I can fix this issue if by going to Inspect Element and removing the entire <head></head> tag. (Removing the content line by line does not fix it!)
I've installed a sample Ember application here. On the index you will see the chart. On the menu routes, there is the same chart (rendered with same view as it was rendered on index.hbs), but not displayed properly (it works a bit when you hover over that area).
The HTML code generated by the chart view is the same on all pages. If you copy the code from <div id="pieChart">..</div> and paste it in a empty static html page, the chart will be rendered correctly.
This issue can be reproduced using: Firefox/Chrome. In safari it seems to work.
Here is a paste2 which renders the chart.
The entire application code before build can be found here.
Edit: I've also reported this issue on github, here.
Set ENV.locationType to "hash" instead of the default ("auto"). Since you're working with an ember-cli application, this lives in config/environment.js.
The ultimate culprit for this can be found here: https://github.com/benkeen/d3pie/blob/master/d3pie-source/_segments.js#L44. Basically, d3pie is using a pattern fill for the circle arcs, which is exposed as a URL. When you're inside a route, that ends up having to go through Ember, which is configured by default to ignore hashed routes. By switching it, you effectively take that call out of Ember's routing namespace and it's able to resolve correctly.
Edit
See here for a working example: https://github.com/Little-Jon/so-29780096
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.
I have a fairly complex text that I need to generate programmatically for display within an ember template. So far I have put this text construction into a controller.
Unfortunately, the text also needs to contain hyperlinks to other pages within the same ember app. When I just insert a href links into the text, ember does not recognize those links and triggers a full page reload upon following the link.
Is there a way to invoke ember's linkTo helper from within a controller?
I could also try to put this into a template, but the logic is fairly complex and emblem is somewhat limiting in this regard.
You can use an action in the template and inside the action you can do this.transitionToRoute
http://emberjs.jsbin.com/uMeQAvuk/1/edit
BTW, the only reason it should be causing a full page refresh is if something is different in the base url (before the hash) than the current page, or if it is doing some sort of page refresh instead of just an anchor tag.
I have a view called "contests_slider" with a block display. I'm hiding all fields and using a "Customfield: PHP code" field instead which calls a function called display_front_contests(). In that function, querying the database and building some html and returning it. I'm displaying the output in a block. The problem is Drupal is adding alot of extra divs that I don't want. I went to "Theme: Information" and copied the theme "views-view-field.tpl.php" to "views-view-field--contests-slider--block-1--phpcode.tpl.php" and put just: in it and it's still outputting all the extra html.
Any ideas? am I using the wrong template?
If you are only using views to create a block, but otherwise query the datebase, create the markup etc, you should consider making a block in a custom module. All the work is in the code you have already written. That way you wont have to think about the many templates that views uses, but instead you'll just use the block.tpl.php.
Take a look at hook_block for info on how to do it.