I'm trying to render a table using a Marionette CompositeView/ItemView and am running into issues with the jade template. The table "shell" is rendered correctly for the composite view but the template for the item view only renders the first table cell in the tbody section. Here is what I have.
CompositView Template
div.span5
table.table.table-striped.table-condensed
thead
tr
th.span2
th.span4
tbody
ItemView Template
td Some Title
td A Description
If I add the tr tag to the ItemView template, then both columns are rendered. But I don't want that because the tr tag is already added by the ItemView. Any ideas why the second column doesn't get rendered?
Thanks!
I found an alternative method to solve this issue. I render the tr tag in the ItemView template, not by specifying it with the ItemView tagName property. Then in the ItemView onRender function, I remove the default div tag that the template is wrapped in. Maybe not the ideal solution but works for what I need.
Related
I have a directive w/ a template that will work in 90% of scenarios. However there are some scenarios where I'll need additional fields be added to the template. Is there a way to extend or modify an existing html template so that adding additional fields is a possibility without rebuilding 90% of an existing template
Put an ng-content in your template
The content you place inside the components tag will appear where you have the ng-content
<your-component>
This content will appear where the ng-content tag is in your component's template
</your-component>
or you can pass in a template
In your component you can have an input that takes a template
#Input()
myTemplate: TemplateRef<any>;
and in the template
<ng-container *ngTemplateOutlet="myTemplate" *ngIf="myTemplate"></ng-container>
and you can pass it in with
<your-component [myTemplate]="someCOntentTemplate"></your-component>
<ng-template #someCOntentTemplate>
This content will be passed to the component
</ng-template>
I am trying to add a kendo tooltip with some html template. In the example mentioned in the link:
http://demos.telerik.com/kendo-ui/tooltip/angular
How would i have a template mentioned in <script> tag added as part of k-content? I have tooltip content bound from view model and the content is dynamic. The content has html tags as well.So how can i bind the template using html element attibutes only.
Thanks.
You can use angular directive to create a template, then use it as k-content.
I'm trying to create an animation for an element that is initially hidden by a ng-show="boolDefaultIsFalse" attribute.
When I trigger the boolean to be true then the element is shown, but the animation doesn't play.
This is because the element never gets the ng-show class. It does start with a ng-hide class. But as soon as I show the element then that class is removed and no new ones are added.
Here's a demo of my problem: http://plnkr.co/edit/OkJnxKlp9Ym1mc8CCD05
Anyone any idea how to solve this problem?
Update
I've updated the Plunker.
I added the ng-class directive to add the ng-show class manually to the div. But the animation still doesn't play.
When you include ngAnimate as a dependency of your module:
var app = angular('app', ['ngAnimate']);
Angular will automatically add/remove the following CSS classes when the ng-show/ng-hide directives are applied:
ng-hide-add
ng-hide-add-active
ng-hide-remove
ng-hide-remove-active
To take advantage of this, add your CSS animation styles to these classes.
Here is an Demo
From the angular documents for ng-show:
The element is shown or hidden by removing or adding the ng-hide CSS class onto the element.
If you want to dynamically add / remove a class, you should use ng-class.
By referring the this link; I am reloading the handlebars partial template from marionette view within my application.
In my marionette view I have defined ui object as below
ui: {
updateCarrierRow: ".hook--edit-carrier-row",
dispatchEquipment: ".hook--dispatch-equipment",
editButton: ".hook--edit-button",
trailerText: "#trailer-text",
tractorText: "#tractor-text"
},
From which trailerText & tractorText variables are referencing the elements from handlebars template loaded within current view's html template using Handlebars expression
{{> dispatchedEquipement}}
application user will be editing some fields from section rendered with this partial template so on changes submitted to server I need to reload this partial template with modified values from parent model.
So by referring link mentioned above I have reloaded partial template on the parent view using following code segment
this.ui.dispatchEquipment.empty().html(Handlebars.compileClean(dispatchEquipmentSectionPartial)({
"dispatchInformation": that.model.get("dispatchInformation"), "displayText": localizedText.displayText
}));
With this code I have successfully reloaded the partial view on my parent view but on subsequent edit operations when I try to access values of input elements within partial template or trying to change / add css classes it wont work with following code statment
this.ui.trailerText.val();
or
this.ui.tractorText.val();
It gives me empty value though text boxes contains proper values. and same happens with adding or removing css class of these elements with the help of this.ui object of parent view for example
this.ui.tractorText.addClass("hidden")
wont add hidden css class to element.
As of now I have managed to get things working with the help of jQuery id selector for those elements. But I would like to know how should I resolve this issue?
Thanks in Advance.
I reckon it is because the ui elements are bound when the view is initialized but during the life cycle of the view you empty and replace the html thereby no longer having your ui elements bound to what is now on screen.
you could try calling this.bindUIElements() afterwards but not fully sure as i've never had to use it like that.
I have a GridPanel which is completely ready and working. It is currently rendered to the DOM by calling the render(id) method of Ext.grid.GridPanel.
This results in the GridPanel beeing rendered right before the html element with the given id.
For programming in my API i now need the rendered HTML of the table in my JavaScript to pass it to another function which can just act on HTML code and i can't change it for compatibility reasons. So the render function doesn't return anything and i don't know how to get the html or at least a reference to the DOM-node of the rendered HTML in JavaScript.
any suggestions?
You can get the HTML of the DOM node of the body of the grid by doing:
gridObject.body.dom.innerHTML
but it is not a table... it is markup styled to look like a table...
The best way to get grid data in HTML would be to add a method to the grid that renders its data into a template.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.XTemplate
Create a dom element, say d.
Then do:
Ext.fly(d).replaceWith(yourGrid.getEl())
This should replace your created dom element's contents with grid's contents. This also retains all the state, since ext component is still there.
I dont think you can actually a "String" of the HTML and pass it on to a function. But you should be able to get reference to the document element, simply by getElementById since you will know the element id (pass it into the config of the GridPanel). You'll simply get reference to the top-level element.
Have you seen the kind of HTML generated by ExtJS? They are not that nice to work directly with, it's simpler if you work with the GridPanel objects.
Its just not possible to render the table before the element exists AND IS ADDED TO THE DOM in which the grid should be rendered. That's really unflexible i think. But i am forced to use it by the project so i will have to change the API to generate some entrypoint - DIVs for the EXT grid before rendering.