I have an application where I need to display metrics. The application needs to display a separate vertical section for each metric. When I started this, there were only 5 metrics so I naively created a template with 5 regions, one for each metric I needed to display. Now, new metrics need to be added and I want to avoid adding "hardcoded" region divs in the template. I want to refactor this and create the required regions dynamically at startup time based on some configuration data.
So I have been looking at the latest Marionette release and in question "Dynamically add regions to Marionette layout", Derick Bailey mentions that Marionette v1.0 supports dynamic regions in Layouts through addRegion(), as in:
var layout = new MyLayout();
layout.render()
layout.addRegion("someRegion", "#some-element");
layout.someRegion.show(new MyView());
I have tried that in my code (using Marionette 1.0.2) and I am not getting it to work. I don't have a div with id="some-element" in my template and I suspect this could be the reason. I was hoping that Marionette would create that div itself.
Perhaps my expectation of what dynamically adding a region means is wrong. So my first question is: when adding regions dynamically to a layout, must the element id passed in the addRegion() function already exist in the layout?
If so, then I am back to the problem of having to "burn" in the template those divs for the regions to attach themselves too. My follow-up question is then: What is the best way of doing this in a data-driven fashion? Is it a matter of writing my own render() function so that the right set of divs get created? Or perhaps providing my Layout with a model object that will contain data which the template can then iterate through to create the necessary divs? How do we add regions dynamically to a Layout object if we don't know in advance how many regions we will actually need?
Aa #aaronfay specified, we need to use jQuery to create the element on the page. Here is some sample code:
var layout = new MyLayout();
layout.render()
var regionName = "dynamicRegion";
layout.$el.append('<div id="'+regionName+'"></div>');
layout.addRegion("someRegion", "#"+regionName);
layout.someRegion.show(new MyView());
I believe you would need to use jQuery (or similar) to create the element on the page. A Region expects the element to exist.
Otherwise, I believe your answer is here.
Related
I'm newest in web.
I want customize default scroll-bar in ag-grid. I try use ngx-scrollbar for this. In sources ngx-scrollbar I found that ngx-scrollbar using ng-content for wrapping elements(link to github source file). If wrap ag-grid-angular element then scrolling even doesn't shows because content doesn't overflow ag-grid-angular content because oveflow happen in div with class .ag-body-viewport where using stock srolls. In order to achieve needed effect I wish pass DOM element with class .ag-body-viewport to ng-content of ngx-scrollbar. Is it possible?
More info here github issue but I don't use Nice Scroll or Perfect Scrollbar
I want use ngx-scrollbar because it has capability of customization.
UPDATE
I can pass DOM element to ng-content using next sintax(agGridViewport is native element):
<ng-scrollbar>
{{ agGridViewport }}
<ng-scrollbar>
but it pass element like a copy of real DOM object but I want pass this like a refence.
Now I got UI like a stack style:
[rendered real ag-grid-angular]
[rendered ng-scrollbar with his content]
But it isn't that I need. Also I got bad rendering with artifacts and even some components doesn't appear. Now I want to try use Renderer2 for putting ng-scrollbar element between two DOM elements in tree(.ag-body-viewport-wrapper and .ag-body-viewport). But I think it's very bad idea because Renderer2 doesn't have methods for putting elements between DOM elements in tree and my code will be very unlify and complicated :( It's must be like injection.
No, I can not do injection in DOM with Angular tools. It's bad idea do it and it is not possible now. AgGrid doesn't support customization with tools like ngx-scrollbar which using ng-content for wrapping components and other elements. May be better way using other tools which working by another way or using webkit customization which supports not all web browsers.
UPDATE
Also I try to use smooth-scrollbar. I managed to get better result. I bind him to element .ag-body-viewport. It works fine but it scrolling only content of grid without header be careful. smooth-scroll bar doesn't have options for horizontal and vertical scrollbar as a different units. I know how issue can be solve. Vertical scrollbar must be bind to .ag-body-viewport and horizaontal scrollbar must be bind to .ag-root. If your can find scrollbar which let you do it that you can solve this problem. May be I write special component for Angular in near future and then add link to this answer. If you do it faster you can add yourself link or you can add link to already existing packages.
Im using play framework and rendering PDF usin rednerPDF() method.
I would like to display some part of content always be in new page.
For Example I have two tables, One table should be in first page and another table should in next page instead of continue from first page. The first table contents are dynamic and we can't sure the height of the table.
Is it possible?
Is it possible?Yes.
You said one table(first one) should be in first page,and again you said its content is dynamic.Now my question is it span over pages and in the next page you want to write second table?This is a generic scenario and what you mentioned is specific one.
You can start trying using two properties of PdfPTable setSplitLate() and setSplitRows()(just google it out for details read Itext In Action).Just keep Two table as two Rows of outer table.set those two property for inner as well as outer in some way as you want(i.e generic case/Specific case).
Another alternative way is use writeSelectedRows() method over PdfContentByte(I don't konw which Object you gonna use for manipulating pdf but you can get it from PdfWriter,*PdfStamper* by using getDirectContent/*UnderContent*/OverContent) after generating table.To use this method you have to set total width of the table so the height can be calculated by method getTotalHeight of PdfPTable.If You use this height properly you absolutely know where your table ends.But all these specific part you have to read & understand first.
With yahp you can use a special html tag to force a page break
<yahp:pb />
we can achieve this by page-break-after:always
Please refer
Alternate to PDF for dynamically generated document with page breaks
I'm writing a custom Orchard module with a custom Theme. I would like to pass data from the View back to the Layout to change the layout based on data determined in the View.
In my example, I have a left-nav in my theme - certain views should be able to instruct the layout not to render this left-nav.
In standard mvc 3 I would just pass the value up through the ViewBag, but this doesn't seem to be working within Orchard - I'm guessing that the layout code is executed before the View is rendered?
I've looked into using a Shape to move this data around but looks like it might be a little heavyweight for what i'm trying to achieve.
What's the best practice for passing data around like this as an alternative to ViewBag?
Update: After playing around with it a bit more i've just noticed that TempData is being picked up in the Layout - can anyone explain why TempData is transmitted, but ViewData isn't? And is it safe to use from an Orchard POV?
It's easier than that... All templates have access to the Layout shape, which is a dynamic object. This means that you can modify it on the fly, add it properties, etc.
In your specific case, suppressing a zone, you may even be able to just set that to null: zones are just shapes, and in the case of top-level zones they are expandos on Layout. So if you have a zone named Foo, setting Layout.Foo to null should do the trick. As a matter of facts, I'm doing exactly that in one of my themes, to suppress the side bars from my error pages without having to create a specific widget layer:
Layout.AsideFirst = null;
Layout.AsideSecond = null;
I have an homemade javascript which, among other things, do some kind of text-formatting work in order to emulate a retro text-based game:
When developing it, i tried to stick close to an MVC model, and this is what i did:
The data model basically consists of a list of objects mapping strings to very specific locations in the display, like this
[{
"value":"Hello!",
"color":"blue",
"row":1,
"column":13
},
{
"value":"What is your quest ?",
"color":"red",
"row":5,
"column":10
},
/* ... some other data */]
Then my view consists of a simple <pre> tag. When my controller draws the model on the view, it iterates through each string-location pair and create a <span> for each one that is appended to the <pre> tag. To keep the formatting consistent, it also adds "blanck" span each time it is needed.
<pre>
<span> </span><span class="blue">Hello!</span><span> </span><br>
<!-- ... other lines of the scene-->
</pre>
It's pretty simple, but it worked great until i had to dynamically change a span text value, without redrawing the whole scene each time.
So i took a look on the internet and realized that Ember.js existed, it really seems to be exactly what i could use to improve my whole code.
Now, i tried to redesign it using Ember.js, but as i don't fully understand yet its features i ran into a problem:
How do you represent a 'text-based' view into an Ember.js handlebar template ?
What am i missing here?
My data model contains both the value and the position in the display, so i don't exactly see how handlebars template could fit my needs. Or perhaps dynamically generating the template is an option ?
What do you think ?
Am I choosing the wrong framework or misunderstanding its use? is it my original MVC design that is wrong ? Changing the data model for something completely different is not an option i can easily consider as it would impact everything.
Do you have any ideas on how this could be implemented using Ember or some other framework?
Any advice will be appreciated :)
I made a rudimentary example on jsfiddle on how you could use ember for this.
Each row is an object and we have an ArrayProxy holding such objects. Thus if we have 10 rows, we have 10 row objects.
The view is binding one output line per row object.
Enjoy the flying bird:
http://jsfiddle.net/algesten/YMrW3/2/
Edit: Better to {{#if}} away empty rows as pointed out by ud3323:
http://jsfiddle.net/ud3323/92b24/
I've just started using the Razor engine with MVC3, so apologies if this is a pretty simple question.
I'm rendering my navigation bar using a #Html.Partial('_SideBarPartial') call, what I need is the _SideBarPartial.cshtml to set a css class on a specific node, if that node contains in it's children the current view.
Currently _SideBarPartial.cshtml is just a static html file, with a <ul><li></li>..</ul> setup.
Any pointers on what/how to go about this would be appreciated.
Thanks, Psytronic
I would use #Html.Partial('_SideBarPartial', somedata)
Where somedata is a view model containing the information needed to build the elements and set the CSS on the necessary element node(s).