Template displaying multiple polymer variables side by side

Here is the date object I am working with:

date = { day: '05' }

When I use this code:

<div>{{date.day}}</div>

It generates the following HTML output:

<div>05</div>

Everything looks good so far.

Now, I want to try this code:

<div>{{date.day}}. {{date.day}}</div>

This should produce the following result:

<div>05. 05</div>

However, instead of the expected output, I am getting an empty string. What could be causing this issue?

I came across an article that uses a similar syntax:

<div>{{i + 1}}. {{fruit}}</div>

I am using Polymer 1.0 and the content is enclosed within a <template> tag.

Answer №1

Within the realm of Polymer 1.0, it is important to note that binding to text nodes is only viable when the binding engulfs the entire tag. Presently, there is no provision for accommodating whitespace or multiple tags in this context.

There are two feasible options:

<div>{{fillMyContent(date.day, date.day)}}</div>

This entails defining a function called fillMyContent which will yield the intended value.

Alternatively:

<div><span>{{date.day}}</span>. <span>{{date.day}}</span></div>

You can opt for utilizing distinct dummy elements that could be fully populated as needed.

Answer №2

The previous article you mentioned utilized an outdated version of Polymer. The current version 1.0 that you are now working with no longer supports this syntax. This information can be found in the official documentation

It is important to note that the binding annotation must cover the entire content of the tag.

If needed, you have the option to utilize computed bindings to achieve the desired outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

I wish to scroll down, and view #div1... also see #div2... When #div2 disappears from sight, I want #div1 to slide down and stay fixed at the top of the window. If I reach the footer div, I no longer want #div1 to remain sticky. If it's po ...

NodeJS - session information lost after building ReactJavaScript application

I've created a NodeJS web application with basic functionality for user login and pulling data from MySql based on session information. The app is functioning as intended (Link). However, when I implement the client-side in React, the session data is ...

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

Configuring the default value for a selection menu in Vue3

Obtaining all available categories: const fetchCategories = async () => { let response = await axios.get(`/api/get_all_category/`) categories.value = response.data.categories } The structure of categories.value is shown here: https://i.sstatic.net ...

Is it possible to combine Django urls and Vue routes in a single project?

After setting up my Django app and implementing the authentication layer using Django-Allauth with features like email confirmation, password reset, and two-factor authentication, I've come to the realization that for my app's interactive nature ...

Utilizing the Global Module in NestJs: A Step-by-Step Guide

My current project is built using NestJS for the back-end. I recently discovered that in NestJS, we have the ability to create Global Modules. Here is an example of how my global module is structured: //Module import {Global, Module} from "@nestjs/commo ...

Reopen a Kendo UI dialog

Currently, I am utilizing Kendo UI, and my goal is to display a modal dialog when a button is clicked. The issue I am facing is that it works perfectly the first time around. However, upon closing the dialog and attempting to reopen it by clicking the butt ...

Exception encountered with HTML5 cache manifest

I attempted to implement the application cache feature on my website, but I am facing a major issue. I only want to cache three specific files: style.css, favicon.ico, and script.js. The problem arises when the browser also caches other files such as inde ...

Incorporating the dot notation, unleash the potential of AngularJS interpolation binding, expressed as `

I want to incorporate the AngularJS interpolation binding with dot notation. <div ng-repeat="item in items"> <input type="checkbox" ng-model="form.city.{{item.region}}.enabled"> </div> However, I keep encountering errors with the ng-m ...

Trigger an instantaneous update of the masonry grid

My website currently utilizes a script that generates a grid, and the grid elements are automatically adjusted each time the width of the viewport is modified. Although I do not have access to or control over the script since I did not write it myself, I s ...

The PhantomJs browser is not able to open my application URL

Recently, my scripts in PhantomJS browser have stopped running. Whenever I try to capture screens, all I get are black screens. To troubleshoot this, I manually opened a URL in PhantomJS using the command window and ran the script below to verify if it ope ...

Generate an array of objects by combining three separate arrays of objects

There are 3 private methods in my Angular component that return arrays of objects. I want to combine these arrays into one array containing all the objects, as they all have the same class. Here is the object structure: export class TimelineItemDto { ...

Pass on the touchmove event from the panel to the content using jQueryMobile

Within my interface, I have a link labeled myLink located in a side panel labeled myPanel, along with some content labeled myContent. My goal is to: Tap and hold on the link myLink within the panel myPanel Have the panel myPanel close immediately Add an ...

Tips for correctly displaying diacritics with Webpack and Typescript

While working on my project, I encountered an issue with diacritics marks (such as German or Polish characters) when using Webpack with Typescript. Unfortunately, the problem arises when trying to display these marks in the console or on a webpage. It seem ...

Creating interactive avatars with Material UI and React to provide a dynamic user

I have developed a simple form validation application using react.js. Each user has a unique profile containing their personal information. I am looking to utilize the first letter of the user's name, for example Peter, where the letter "P" would be d ...

Issue encountered while attempting to retrieve data from a local json file due to Cross-Origin Resource Sharing

I'm attempting to fetch and display the contents of a JSON file on a webpage, but I'm encountering this error message: Access to XMLHttpRequest at 'file:///C:/Users/bobal/Documents/htmlTry/myData.json' from origin 'null' has ...

Change the className of an element in React upon clicking it

I just finished developing a menu bar using ReactJS with some basic routing features. Here is the JSX code for the component: class TopBar extends Component { state = { menus: [{id:0,menu:"Home"}, {id:1,menu:"Contact"}, {id:2,menu:"About"}] } a ...

Insert item at the end of the box and move all elements upwards

Hello! I'm experimenting with creating something using javascript's createElement method. My goal is to achieve an effect similar to this image: https://i.stack.imgur.com/itKUK.gif Currently, my code is functional, but the animation goes from to ...

Tips for effectively managing relationships in a RESTful API

Exploring the concept of REST architecture through the development of a RESTful service for an 'Issues Tracking Application'. In this application, users, projects, issues, and comments are integral components. The relationships are outlined as f ...

React array mapping issue does not produce any error message

I have exhaustively searched through every answer on Stack Overflow in hopes of finding a solution to my problem. However, I find myself at an impasse as there are no error messages appearing in the console. It seems that there is a hidden bug eluding my d ...