I've made a page in Svelte. I've provided translations in two languages and it works fine. Now, I want the title on each page to change, and what's more, I want it translated into the current language of the page. I've tried with two-way binding, but I think, that I make something wrong. Minimal example:
//../components/meta-title.svelte
<svelte:head>
<title>{title}</title>
</svelte:head>
<script>
export let title = "default title for page"
</script>
//../pages/_layout.svelte
<Meta bind:title={$_('title.companyTitle')} /> //doesn't work
<Navigation items={items}/>
<div>
<slot/>
</div>
<Footer contact={contact}/>
//../pages/company.svelte
<LeadSection classes="lg:flex-row-reverse -mt-24">
<div slot="header">
{ $_('pages.company.header') }
</div>
...
</LeadSection>
Any ideas how to make this?
My understanding is: you want to dynamically set the title. To achieve this you don't have to use two way binding. Two way binding is meant to write back to a variable in the parent component. The "variable" you are trying to bind to is not a variable but a store which can't be used for binding. Just pass the title in as a normal prop and it should work:
//../components/meta-title.svelte
<svelte:head>
<title>{title}</title>
</svelte:head>
<script>
export let title = "default title for page"
</script>
//../pages/_layout.svelte
<Meta title="This is a dynamic title" />
...
If you are using routing "svelte-routing" then you must have created the separate pages e.g "Home.svelte", "About.svelte".
On each page add this;
<svelte:head>
<title> Title here as a plain text </title>
</svelte:head>
You can use a variable if you already have pageName;
<svelte:head>
<title> {pageName} </title>
</svelte:head>
<script>
let pageName="Home";
</script>
Related
I'm having a problem with figuring out how to add the name of the pokemon given in the input field, into the url of the api. My goal is to be able to search for the desired pokemon and then view it in a div below. I'm not exactly sure what this specific technique or method would be called in order to achieve this. Thank you in advance.
<!DOCTYPE html>
<!-- Create a full CRUD application of your choice. If you can use an existing API, use AJAX to interact with it. However, you do not have to use an API. If you do not use an API, store the entities you will create, read, update, and delete in an array.
Use a form to add new entities
Build a way for users to update or delete entities
Use Bootstrap and CSS to style your project -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Choose Your Pokemon Party</title>
</head>
<body>
<div>
<head>
<h2>Choose Your Pokemon Party</h2>
</head>
</div>
<div>
<div id="new-pokemon">
<h2>New Pokemon</h2>
<input type="text" id="new-pokemon-name" class="form-control" placeholder="Pokemon name">
<button type="submit" id="create-new-pokemon">Submit</button>
</div>
<div id="view-pokemon">
<!-- //views the requested pokemon, and you can add the pokemon from here -->
<button type="submit" id="add-pokemon">Add</button>
</div>
<div id="pokemon-party">
<!-- //pokemon party -->
</div>
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
Javascript file
let pokeapi_URL = 'https://pokeapi.co/api/v2/pokemon/';
$.get('https://pokeapi.co/api/v2/pokemon/ditto', (data) => {
return console.log(data);
});
$.get('#create-new-pokemon').click(function(){
let pokemonName = $.get('new-pokemon-name').val();
console.log($.get('https://pokemonapi.co/api/v2/pokemon/ + pokemonName'))
});
class PokemonParty{
constructor(pokemon)
{
pokemon = [];
}
}
//When the user submits the name of the pokemon they want, it shows the pokemon, it's name
//typing moves and abilities
//the user can add the pokemon to it's party or search for another pokemon
//takes in the pokemon that are added from the form.
Your current code seems to be confused regarding the function of the $.get() method. This is only for making AJAX requests. It's not for retrieving data from the DOM, or working with jQuery objects in general.
In the case of the Pokemon API, to retrieve data you simply need to concatenate the name of the pokemon to the end of the GET URL.
To do this, hook your event handler to the click of the button and retrieve the val() from the #new-pokemon-name element.
let pokeapi_URL = 'https://pokeapi.co/api/v2/pokemon/';
$('#create-new-pokemon').on('click', () => {
let pokemonName = $('#new-pokemon-name').val();
$.get(pokeapi_URL + pokemonName, data => {
console.log(JSON.stringify(data));
// build the UI based on the response data here...
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
<head>
<h2>Choose Your Pokemon Party</h2>
</head>
</div>
<div>
<div id="new-pokemon">
<h2>New Pokemon</h2>
<input type="text" id="new-pokemon-name" class="form-control" placeholder="Pokemon name" value="squirtle" />
<button type="button" id="create-new-pokemon">Submit</button>
</div>
<div id="view-pokemon">
<!-- //views the requested pokemon, and you can add the pokemon from here -->
<!-- <button type="submit" id="add-pokemon">Add</button> -->
</div>
<div id="pokemon-party">
<!-- //pokemon party -->
</div>
</div>
Note that if you're new to jQuery, I'd suggest reading the excellent beginner's documentation.
I am trying to create custom form element which I am trying to reuse in other applications developed in angular and jsp page of Java
my-element.js:
class MyElement extends HTMLElement {
// This gets called when the HTML parser sees your tag
constructor() {
super(); // always call super() first in the ctor.
this.msg = 'Hello, World!';
}
// Called when your element is inserted in the DOM or
// immediately after the constructor if it’s already in the DOM
connectedCallback() {
this.innerHTML = `<form action="/action_page.php">
<div class="container">
<label><b>Name</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Age</b></label>
<input type="text" placeholder="Enter Age" name="age" required>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Add</button>
</div>
</div>
</form>`;
}
}
// This registers your new tag and associates it with your class
window.customElements.define('my-element', MyElement);
my-element.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/polymer/polymer.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/iron-ajax/iron-ajax.html">
<script src="my-element.js"></script>
<!-- <link rel="import" href="add-form.html"> -->
</head>
<body>
<my-element></my-element>
</body>
</html>
Two issues I am struggling with now are below
1.Can i incude both the files as below to my angular and java jsp page and use custom tag to work?
<link rel="import" href="my-element.html">
<script src="my-element.js"></script>
<my-element></my-element>
I am trying to pass below json object as an attribute to custom form element and trying to render custom form elements
[
{
"name":"Name",
"type":"text",
"size":"20",
"readyOnly": false,
"validateFunction":"onlyText"
},
{
"name":"Age",
"type":"number",
"size":"3",
"readyOnly": false,
"validateFunction":"onlyNumber"
}
]
I tried using below way to inject json data to custom element to render form elements based on json but no luck and there are no console errors
<my-element form-data="{{data}}"></my-element>
ad 1) yes you can use your element with every server system you would like. It's "just html" that the beauty in it :)
ad 2)
HTMLElement won't do anything automatically. So if you wish to access your json you will have to do something like this
<my-element form-data="{'name': 'Name', 'type': 'text'}""></my-element>
connectedCallback() {
let rawData = this.getAttribute('form-data');
let jsonData = JSON.parse(rawData.replace(/'/g, '"'));
}
Notice that in the form-data json there are ' instead of ". So we have to replace them before using JSON.parse.
it looks like this is using a web component as opposed to a polymer component. The native web component API does not include data binding, although angular and polymer both do (but implemented in different ways).
Native web components and polymer components can be used with Angular as well as other frameworks.
Depending on whether you are using Angular.js(1) or Angular(2+), setting up the data object to be passed into the DOM will vary, but in general the data should be "set up" so to speak in the JS and passed into the DOM. Otherwise as #daKmoR said, the data would need to be declared as he did in his example.
There are packages that assist in implementing data 2-way binding between polymer's data bindings and angulars bindings if that is needed.
Trey
I am coding a C# forms application that lets a user add custom html nodes to a html webpage. I have some javascript code that selects a html node to execute specific code for objects such as a jQuery ui slider.
To identify html nodes, I need to store an attribute in the tag that identifies the tag.
I am new to writing html code, and as such, I would like to ask if there is any reason why I should not use data attributes for tags? Are there any limitations are disadvantages that I should be aware of?
Here is some example code that I have currently working:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-customwebpagelayout-name='slider-increments'>
<div data-customwebpageobject-name='slider-increments'></div>
</div>
<p data-customwebpageobject-output-name='slider-increments'>1</p>
</body>
</html>
Thank you.
The common way to identify and select HTML tags is with either class or id.
If there is only going to be one of something on a page, you should use id. It looks like you have multiple of the same thing you want to identify, so I'd use class like so:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="customwebpagelayout slider-increments" >
<div class="customwebpageobject slider-increments"></div>
</div>
<p class="customwebpageobject slider-increments">1</p>
</body>
</html>
Then you could select the nodes with javascript like so:
document.getElementsByClassName("slider-increments");
or if you decide to use jQuery:
$(".slider-increments");
Data attributes are more of a pain to work with:
Raw Javascript (code adapted from code in this answer):
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++){
if (allElements[i].getAttribute('data-customwebpagelayout-name') !== null){
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
//use matchingElements;
jQuery:
$("*[data-customwebpagelayout-name='data-customwebpagelayout-name']");
I have a Meteor template (in a separate HTML file in the client directory) called "head" and I want to do this:
<head>
{{> head}}
</head>
Meteor seems to ignore this and instead just renders the text {{> head}} on the HTML page.
Can I reference my header through Meteor or do I have to put it directly into my non-template HTML?
Also, I would like to receive an answer, not a reason why I should not be doing this. :)
Not supported:
https://github.com/meteor/meteor/issues/266
Just use normal DOM manipulation to achieve that. E.g. to change document title:
Tracker.autorun(function () {
var pageTitle = Session.get('pageTitle');
// only change title if we have one so that we preserve initial title
if (pageTitle){
document.title = "My Awesome Site " + pageTitle;
}
});
Source: https://groups.google.com/forum/#!msg/meteor-core/Q_XYXM5WNdo/42G9Eh4EcswJ
Is possible retrieve multiples html partials in one single html? I've the next situation:
Template: {header} {main} {footer}
/index: header:"Welcome" main:"welcome text" footer:""
/help: header:"Help title" main:"faq tips" footer"Back to home"
using ng-include I've to retreive 6 html from server. If I will retrive multiples partials in one html then I will retrieve 2 html from server only, one for /index and one for /help.
This situation is a small example the real situation.
The tag script with type ng-template don't work for me, because the script must be include before of ng-include.
Thanks!
Update 04/07/12:
I seek to update more than one div at a time, with an unique html retreive. I don't like this:
function IndexCtrl($scope) {
$scope.mainPage = 'partials/index/index.html';
$scope.headerTemplate = 'partials/index/header.html';
$scope.footerTemplate = 'partials/index/footer.html';
}
After in the template use ng-includes for include these partials. I think that this is not the correct way. There is other way?
Thanks!
Templates can be embedded in the main html. For example, with the following index.html:
<!DOCTYPE html>
<html ng-app=app>
<meta charset=utf-8>
<title>App</title>
<ng-view>Loading...</ng-view>
<script type=text/ng-template id=partial1.html>
<p>foo = {{foo}}</p>
</script>
<script type=text/ng-template id=partial2.html>
<p>Contents of partial2.html</p>
</script>
<script src=app.js></script>
you can use the following app.js:
angular.module('app', [], ['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {
$routeProvider.when('/p1', { templateUrl: 'partial1.html', controller: 'Partial1' });
$controllerProvider.register('Partial1', ['$scope', function($scope) {
$scope.foo = 'bar';
}]);
}]);
The documentation for the $templateCache service has more details.
What I do is use template instead of templateUrl, and use the requirejs text plugin to load the templates. that way for development you can have thousands of files for your templates, but once you minify you only have one javascript file with all the templates inlined.
I created an open source project which is setup for backbone but can easily be modified for angular which does the minification and requirejs text plugin wiring for you: http://github.com/davidjnelson/agilejs