I am trying to write a custom DOM helper similar to dom-if and dom-repeat which extends template. It takes an attribute say partial name. Based on this partial name it would make an ajax response and get actual content part of template which has Polymer data binding markup also. So it basically needs to do lazy render of content.
Related
We know we can extend an angular component but I would like to also extend the template associated. I mean, for instance, I could define an abstract component with its template with kind of skeleton, and then in the children would be forced to implements not only the abstract class methods and so on, but also the "empty gaps" of the skeleton html template.
Up to now, I have to completely redefine the template in the child.
I know that I could create another component but that a relatioship by association. It's annoying because I have to create an abstract class to be extend and then a component to redefine the template.
How do you do that?
Thank you in advance!
This is not possible. What could be useful to you is content projection
https://blog.angular-university.io/angular-ng-content/
How to stop attribute to change case in html
let test1 = document.createElement('div');
test1.innerHTML = '<div [ngClass]>Test</div>';
console.log('--------dynamic', test1.innerHTML);
Here, [ngClass] change to ngclass.
This code
test1.innerHTML = '<div [ngClass]>Test</div>';
is entirely pointless. Angular won't do anything with [ngClass].
Angular processes Angular specific markup only when it compiles a components template, but not when it is added to the DOM.
If you want to add Angular specific markup at runtime, you need to dynamically create and compile a component.
For more details see How can I use/create dynamic template to compile dynamic Component with Angular 2.0?
HTML attribute names are case-insensitive.
There is no way to stop browsers from normalising them when you give them some HTML to parse into a DOM and then serialise that DOM back to HTML.
If you want to process Angular's template language and maintain case sensitivity, then don't do so using tools that are designed to deal with HTML.
Is there a way to make part of markup ignored during Angular2 compilation? The issue is i have additional library that uses jQuery and <template> tags and because of Angular the <template> html tags are not present in DOM when the library tries to reach it with $('template') selector.
A workaround is to inject needed HTML markup after containing container init. So i've made simple $('container')[0].innerHtml = 'markup with <template></template>' in one of my angular2 components in ngOnInit method.
Is it possible to use the HAP (HTML Agility Pack) to:
Grab a collection of nodes e.g. all <a> elements which are children of <li> elements
Iterate over the collection
Add CSS class references into the class attribute for each element e.g. class &= "foo"
Update the nodes in their original position within the HTML
For point 4, I need to know whether:
When I grab a collection of nodes, am I working with copies?
If so, can I easily update the nodes in their original position within the HTML
Finally, would it be practical to do this when rendering a page in an ASP.NET website, considering:
I will need to modify the class references for no more than 100
elements
I am not working with large HTML documents
I plan to select my nodes starting at a div e.g. div[2] where body
contains 4 divs
I realise that this may seem like a bunch of separate questions but really it is just a breakdown of the following two questions:
Can I easily modify the HTML output of an ASP.NET page e.g. to insert class references?
Would it be practical to do this on 50 - 100 elements WRT speed e.g. no more than 2 seconds cost?
Many thanks.
Check out my CsQuery project: https://github.com/jamietre/csquery or on nuget as "CsQuery".
This is a C# (.NET 4) port of jQuery. Selectors are orders of magnitude faster than HTML Agility Pack; in fact, my initial purpose in writing it was to do exactly what you want to do: manipulate HTML in real time. As it happens, from a CMS with html generated by ckeditor.
To intercept HTML in webforms with CsQuery you do this in the page codebehind:
using CsQuery;
using CsQuery.Web;
protected override void Render(HtmlTextWriter writer)
{
// the CsQueryHttpContext object is part of the CsQuery library, it's a helper
// than abstracts the process of intercepting base.Render() for you.
CsQueryHttpContext csqContext =
WebForms.CreateFromRender(Page, base.Render, writer);
// CQ object is like a jQuery object. The "Dom" property of the context
// returned above represents the output of this page.
CQ doc = csqContext.Dom;
doc["li > a"].AddClass("foo");
// write it
csqContext.Render();
}
There is basic documentation on GitHub, but apart from getting HTML in and out, it works pretty much like jQuery. The WebForms object above is just to help you handle interacting with the HtmlTextWriter object and the Render method. The general-purpose usage is very simple:
var doc = CQ.Create(htmlString);
// or
var doc = CQ.CreateFromUrl(url);
.. do stuff with doc, a CQ object that acts like a jQuery object
string html = doc.Render();
Don't do that ! ASP.NET is not meant to be used that way, there is a better ways to do this task depending on how do you create that markup in witch you want change or add css classes. ASP.NET uses aspx templates, basically html markup and there you can intervene with code executing on server, here you can set css class statically or use server side scripts to set css class on markup with some code.
You can also create controls in code behind and set css to controls if anchor control have parent that is list item control (you will have to use server side controls).
To do it your way you will have to make Response Filter (example here) and after request is done do your parsing and write results and changes back to response stream. It's much easier using common ASP.NET techniques.
If i want to have a common piece of UI across multiple pages, such as a menu, what is the recommended way to do this?
It would contain both template code and a back-end controller (similar to "snippets" in the LiftWeb framework).
I am aware that there is a menu module for Play, but I'm more interested in how this would be achieved in general.
There are two ways to include common view code into the Play Framework.
You can use the #{include} tag or the #{extends} tag.
The extends tag, as the name suggests, extends from a parent view. The extends tag is used by default in the skeleton code set up by Play when you create a new application. It extends the main.html. You add your code here.
The includes tag, allows you to inject a common piece of view code into your templates at a specified point. This works in much the same was a php include/require, or jsp includes work.
The problem will come when your template code also requires data or logic from the model (via the controller). If this is the case, then you will need to use the #Before or #With notation in your controller to ensure that the common piece of controller code is executed each time. You can add any data to the renderArgs list, so that it is available for use within the view.
A simple example of using renderArgs would be.
#Before
private static void commonData() {
// do your logic here
renderArgs.put("menu", menu);
renderArgs.put("selected", selectedMenuItem);
}
the values you have put into renderArgs (menu and selected in the example) will be available just in the same way as if you passed them into the render method.