60881

Why does the html from template dom-if not get applied here

Question:

Consider this code:

<div class="container"> <table class="c"> <tr> <template is="dom-repeat" items="[[days]]" as="o"> <td class$="[[dayClass(o)]]"><span class="d">[[formatDay(o)]]</span></td> <template is="dom-if" if="[[lastDayOfWeek(o)]]"></tr> <template is="dom-if" if="[[!lastDayOfCalendar(o)]]"><tr></template> </template> </template> </tr> </table> </div>

Why do the </tr> and <tr> not get applied to the html?

Full JS Bin demo here: <a href="https://jsbin.com/dujekefoga/edit?html,output" rel="nofollow">https://jsbin.com/dujekefoga/edit?html,output</a>

<strong>Edit:</strong> Fixed JS Bin url

Answer1:

Your table row tags are misplaced, I got closer to your expected result by changing the order in which the tags are placed. Hope this helps you.

<a href="https://jsbin.com/quvutugijo/1/edit?html,output" rel="nofollow">https://jsbin.com/quvutugijo/1/edit?html,output</a>

Answer2:

At the end, this is what works. And I believe it's the best solution, as it works with two non-nested dom-if, and the html is valid.

I just needed to add a function firstDayOfWeek which returns true if item.isoWeekday() === 1.

<template is="dom-repeat" items="[[days]]" as="o"> <template is="dom-if" if="[[firstDayOfWeek(o)]]"><tr></template> <td class$="[[dayClass(o)]]"><span class="d">[[formatDay(o)]]</span></td> <template is="dom-if" if="[[lastDayOfWeek(o)]]"></tr></template> </template>

Recommend

  • How to get week start date Sunday and week end date Saturday in php
  • How does Object.assign work anyway?
  • Is it possible to set perspective-origin on elements that are transformed with transform: perspectiv
  • disable mouse interaction on videojs scrubber
  • Ember Websocket…can't find any records?
  • D3 Multiline Chart with Tooltip Transition Issue
  • How to create a draggable menu div (desktop and mobile) [closed]
  • Need help in OnChange event Javascript
  • Putting focus on a textbox in onchange event
  • Display table is exceeding parent height in every browser but Chrome
  • Restrict width on element to width of first child
  • Pie chart legend in dc.js 1.7 not showing up
  • Textarea Preview Div
  • How to Sum array parts within a loop with time-complexity of Big O(N)
  • How do $scope and this techniques differ in terms of sharing data via services?
  • onHover effect with textarea
  • SAP UI5 - How to load a external .html file?
  • Why is document.getelementbyId not working in Firefox?
  • Group/sum property values inside an array of objects(json) using Angular 4 Pipes or Rxjs operators
  • Global hook in Ember when template is rendered
  • JQuery load doesn't seem to process ?
  • Other operator in calculation chain than combineLatest to avoid redundant calculations
  • jquery datatables FixedColumns not defined
  • Finding for convolution kernel if many 0's for FFT?
  • How can I sum two different columns at once where one contains Decimal objects in pandas?
  • Capturing HTML Text Input Key press after key has been applied?
  • How to have a website splash screen (web app)
  • How gzip file gets stored in HDFS
  • Angular - routerLinkActive and queryParams handling
  • Is it possible to get the word under the mouse cursor in a ``?
  • Insert into database using onclick function
  • Cross-Platform Protobuf Serialization
  • jquery mobile loadPage not working
  • Web-crawler for facebook in python
  • How to get icons for entities from eclipse?
  • Revoking OAuth Access Token Results in 404 Not Found
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • JaxB to read class hierarchy