I'm looking to implement condition based HTML in lit-element and need something like *ngIf which Angular provides.
I could render different HTML based on conditions but it will be great if it can be done with condition.
You can use plain Javascript. Explained well in official documentation
Example:
${this.myBool ? html`<p>something</p>` : html`<p>something else</p>`}
Expanding on Kuba's answer, it's good to be as specific as possible with lit-html conditions, as the more broad-scoped your condition is, the more of the template that needs to be rerendered when the condition changes. For example, you can make the example given in the official documentation:
this.myBool ? html`<p>something</p>` : html`<p>something else</p>`
And write it more efficiently as:
html`<p>${this.myBool ? 'something' : 'something else'}</p>`
This little change here doesn't change much, but when you can reduce the amount of rerendering of layers of components, it starts to add up.
For a more thorough explanation of how lit-html handles template rendering, see: https://lit-html.polymer-project.org/guide/concepts#template-creation
Related
I frequently use PhpStorm's Extract variable & method refactorings. Is there a way to add/extend functionality that could create a new template file from the selected code, prompt for desired template path, and create an include/require statement for that template?
I'm asking either for an entry point into coding this functionality, or extending existing functionality. Or maybe it's already available and I missed it.
As #Ástþór mentioned, there is no such way to change the refactoring templates.
You can use surround with live templates to emulate this behavior. This will not find duplicates and will not replace them as well, but may be it's close enough what you want.
Add a surround live template like this one. Open the editor with Ctrl+Alt+S:
Edit the variables in order to get a nicer UX:
Select the variable you want to extract and select Code > Surround with Live Templates from the menu or press Ctrl+Alt+J.
Adjust the templates to your needs.
Live template variables
HTH
No, there isn't. You can ask this question at https://intellij-support.jetbrains.com/hc/en-us/community/topics/200366979-IntelliJ-IDEA-Open-API-and-Plugin-Development
Other useful sources: https://www.jetbrains.org/intellij/sdk/docs/basics/getting_started.html & https://confluence.jetbrains.com/display/PhpStorm/Setting-up+environment+for+PhpStorm+plugin+development
What is the minimum example, if any, using the Polymer PWA (https://polymer.github.io/pwa-starter-kit/), to show correctly a vaadin-grid?
I tried many different combinations, but never a working one, with, often, this warning:
property-accessors.js:275 Polymer::Attributes: couldn't decode Array as JSON
Am I doing anything totally wrong?
Thanks
Andrea
Starting from the v5.2.0-beta1 we recommend using following Grid features:
column helper elements (vaadin-grid-filter-column, vaadin-grid-sort-column)
column convenience properties (path, header and text-align)
renderers for more complex cases where you previously used templates
See the example here: https://glitch.com/edit/#!/lying-blanket?path=app.js:29:42
https://lying-blanket.glitch.me/
Note: I'm using fetch API here for simplicity only, you can use XHR if necessary.
I'm working on a Play application and need to generate links in a mixed Scala-HTML view that call controller actions. I found this question from a couple years ago that's similar to my situation, but the provided answers don't work for me.
The elements are generated in a loop so I can't manually insert the argument to the controller action, but nothing I've tried has worked. This is the line I have now:
ID: #{var fhirID = <processing for ID>; <a href='#routes.Users.fhirUserDetails(fhirID)'>fhirID</a>}
The accepted answer to the question I linked earlier effectively uses this structure too:
<a href='#routes.Application.show("some")'>My link with some string</a>
My issue here is twofold:
1) How can I have the variable fhirID passed to the controller action? My generated link simply has the text "fhirID" instead of what's generated by the first part of the statement.
2) Is the #routes.Users syntax correct? When I click the generated link, it literally attempts to render a page at /myapp/#routes.Users.fhirUserDetails(fhirID)
I realize I'm probably missing something very basic here- thanks for any advice!
The problem seems to be not the #routes syntax (which you have completely correct) but rather a case of the Twirl engine not seeing where code ends and HTML begins (or something like that anyway...)
The line you've included, which has both a var and a semicolon, made me suspect this, and I've been able to reproduce the problem when I use that style.
My recommendation is to use the #defining helper rather than var to get a scoped variable for use in your links, as follows:
ID: #defining(<processing for ID>) { fhirID =>
<a href='#routes.Users.fhirUserDetails(fhirID)'>fhirID</a>
}
You can nest #defining blocks as deeply as you like if necessary, although it's probably better to make a call out to a reusable block if there's a lot of logic. I think this style makes for more-readable templates and also somehow looks more like "real Scala" :-)
i created a site, And added pages to my site, since page size exceeds i need to create pagination in html i have created this method
123
in this way i created
Problem is when i add new page i need to replace all code again like this
1234
ever time when i add new page i need to replace all code is ther a way to do this without PHP
Can sombody help me any idea to do this in html
Do not re-invent the wheel. Use datatables, they provide sorting, pagination (client side and server side), export and a number of additional features.
http://datatables.net/
Include the files and just add this.
$(document).ready(function() {
$('#example').dataTable();
} );
This is a very basic and good example, you should go for it.
http://datatables.net/examples/data_sources/dom.html
This cannot be done purely in HTML. You must use something like PHP, or you could use Javascript.
You can make just one HTML file called "Pagination.html" include all your links there and then include that Pagination on every page using one of the following methods.
You can use Javascript: javascript
Or you can use html5: html5
Or there are also, others solutions to solve your problem like this: other
You better use some Javascript oriented solution, html5 support for including files still very poor.
unfortunately, this won't be possible without using some other technology that is not HTML. You can dynamically generate pages using javascript (JS), PHP or other technology, but not just raw HTML.
You can name your pages something like:
page_1.html
page_2.html
and then whichever editor you are using probably has a search & replace function, so you could use that to speed up things. I hope this helps.
Hi I am trying to incorporate Table filtering , where the user can select a author or name and filter the table based on then name . The feed has to be Based on xml feed .
Is there any example that I can use?
I was was looking at this example http://dev.sencha.com/deploy/ext-4.0.2/examples/grid/xml-grid.html
or something http://www.picnet.com.au/resources/tablefilter/demo.htm
How can I add a combo box(dropdown box) outside the table to filter based on various authors selection name the feed i would like to use is xml
Or any other example similar to this
Thanks
You'd be best off using a JavaScript library such as jQuery, which enables you to use the myriad plugins that are available.
jqGrid does all of that kind of stuff for you.
Have a look at the examples here under Live Data Manipulation > Searching Data. You should be able to just replace the input with a select.
Alternatively, still with jQuery but this question might do what you need: Filter table from <select> input using jQuery
The answer is in your question. Filters are generated by jQuery plugin. Here's step by step manual.
Use standard DOM (DomDocument class). Example: this testkit loads any HTML DTD, and you can do any filter with a good and standard XSLT transform.