lit introduces an example of "Change detection" at the following URL.
https://lit.dev/playground/#sample=examples/properties-has-changed
Why is there a "." at the beginning of "date" when specifying the "date-display" option in line 16 of my-element.ts?
import { LitElement, html} from "lit";
import {customElement, property} from 'lit/decorators.js';
import {localDateFromUTC} from './date-utils.js';
import './date-display.js';
#customElement('my-element')
class MyElement extends LitElement {
#property() date?: Date;
render() {
return html`
<p>Choose a date:
<input type="date" #change=${this._dateChanged}></p>
<p><button #click=${this._chooseToday}>Choose Today</button></p>
<p>Date chosen: <date-display .date=${this.date}></date-display></p>
`;
}
_dateChanged(e: Event) {
const utcDate = (e.target as HTMLInputElement).valueAsDate;
if (utcDate) {
this.date = localDateFromUTC(utcDate);
}
}
_chooseToday() {
this.date = new Date();
}
}
Lit uses prefixes to indicate the type of expression in a component's template. The . prefix denotes a property expression; without the prefix it would be an attribute expression. Using a property expression makes it very easy and convenient to pass any JS object to a child element (in this case a Date object).
When using HTML attributes you need to be aware that they are always strings. JS data must be converted to a string on the parent element, and then possibly converted back to the corresponding JS type on the child element.
No such conversion is performed with property expressions, because the data stays in "JS land".
So, why not always use property expressions? Two examples come to my mind right away:
For a property expression to work you need to know an implementation detail of the child element, i.e. that it has a corresponding JS property. (If you're dealing with your own Lit based elements inside a single project that is not a problem.)
If you want to apply selectors based on attributes (e.g. for styling my-button[disabled] { /* CSS ... /* } or using querySelector).
Related
I want that every time I use yup.string(), it will add a specific default value for it
for example:
const schema = yup.object({
text: yup.string()// I want it to also do .default('some string') in the background,
});
or - another option - is there any way to set the default value after creating the scheme? something like setDefault('text', 'some string')
The closest solution I came across to solve your issue is extending your string with a custom method that implements your needs. To do that you need to use addMethod from yup:
import { addMethod, string } from 'yup';
addMethod(string, 'append', function append(appendStr) {
return this.transform((value) => `${value}${appendStr}`);
});
Now, you can use your custom method (append) and apply it to any string you want:
string().append('~~~~').cast('hi'); // 'hi~~~~'
If you want to add the custom method to all your schema types like date, number, etc..., you need to extend the abstract base class Schema:
import { addMethod, Schema } from 'yup';
addMethod(Schema, 'myCustomMethod', ...)
Extra
For Typescript
In your type definition file, you need to declare module yup with your custom method's arguments and return types:
// globals.d.ts
import { StringSchema } from "yup";
declare module 'yup' {
interface StringSchema<TType, TContext, TDefault, TFlags> {
append(appendStr: string): this;
}
}
Unknow behavior for transform method
While I was trying to extend the functionality of the date schema with a custom method that transform the date that user enters from DD-MM-YYY to YYYY-MM-DD, the custom method broke after I used it with other methods like min, max for example.
// `dayMonthYear` should transform "31-12-2022"
// to "2022-12-31" but for some reason it kept
// ignoring the `cast` date and tried to transform
// `1900` instead!
Yup.date().dayMonthYear().min(1900).max(2100).required().cast("31-12-2022") // error
To work around this issue, I appended my custom method at the end of my schema chain:
Yup.date().min(1900).max(2100).required().cast("31-12-2022").dayMonthYear() // works as expected
This issue is mentioned in this GH ticket which I recommend going through it as it's going more in-depth on how to add custom methods with Typescript.
References
addMethod
Extending built-in schema with new methods
Example of addMethod in Typescript (GH ticket)
I am trying to use a value-formatter in my AG-GRID table for displaying currency information.
This works perfectly when I have a hardcoded value in the formatter, in this case the unicode for 'Euros'
currencyFormatter(params) {
return '\u20ac' + params.value;
}
However, I dont know in advance what currency I will need to format the data in, as it is dynamically generated. If I try an use a value that is available in my component (like below) it doesn't like it!
currencyFormatter(params) {
return this.currencyUnicode + params.value;
}
There it throws in the console is:
TypeError: Cannot read property 'defaultCurrency' of undefined
It seems like all 'this' component variables are not available inside the currencyFormatter. Is there a way to make this work?
In order to access your component variables, you will have to bind your component context - this to the valueFormatter
...
name : 'Currency',
field : 'currency',
valueFormatter: this.currencyFormatter.bind(this) //bind your component's context here
...
currencyFormatter(params) {
return this.currencyUnicode + params.value;
}
This is a common javascript problem. Here is a good read
Also, this answer describes the 2 ways you can reference this.
I'm working on single page application, which involves sorting.
I use
viewModel = new {
SortAsc = ko.observable(true)
};
ko.linkObservableToUrl(viewModel.SortAsc, "Asc", viewModel.SortAsc());
to achieve that mapping. And it works, but the problem is that mapping returns literal strings "false" and "true" instead of bool value. This causes a problem with checkbox, which is bound to that property:
<input type="checkbox" data-bind="checked: SortAsc" value="Ascending"/>
The question is, how can I make that value from url to be converted to correct type (normal bool), so my checkbox will be updated properly?
Ok, I found how to overcome that problem. Not very elegant, but works.
1. I assumed, that SortAsc will be a string property in my logic. So I left it bound to url like in the question text. Only initialized it with string, istead of bool ("true" intead of true).
2. I created writeable dependend observable, which will do the convertion:
viewModel.SortAscBool = ko.dependentObservable({
read: function () {
return this.SortAsc() === "true";
},
write: function (value) {
this.SortAsc(String(value));
},
owner: viewModel
});
and bound my checkbox to that prop. So now, when checkbox is checked, SortAscBool is changed and it sets literal value to SortAsc (I think this convertion is really not needed, but as a C# programmer I like it that way :)). And of course, when SortAsc changes, SortAscBool will also change and return the converted value to checked binding. And that is what was really needed.
Also, my first though was to simply create one way dependend observable, but then url will not be updated with values from checkbox.
I'm using Knockout with jQuery and jQuery templates. Assume that I have a template which expects a person object
<script type="text/html" id="person_template">
<tr><td>Forename</td><td><input type="textbox" data-bind="value:FORENAME" /></td></tr>
<tr><td>Surname</td><td><input type="textbox" data-bind="value: SURNAME"/></td></tr>
</script>
Now, if I pass an object with just a FORENAME to this template, I will get an error:
SURNAME is not defined error
I tried to create a custom binding in Knockout, but the error is thrown before it even gets there.
If I fill in these empty fields before passing the object to the template, I know everything will work out, but I would like to have the solution in my template rather than in my javascript.
Does anyone know a method that might help for situations like these?
This is a bit challenging, because you are within a template. While preparing the template, KO accesses the variable (well, actually it is accessed in jQuery Templates by a function that KO built).
One option is to pass your property as a string to a custom binding and make sure that it is initialized.
It would be like:
ko.bindingHandlers.valueWithInit = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
var value = valueAccessor();
if (!context[value]) {
context[value] = ko.observable();
}
var realValueAccessor = function() {
return context[value];
}
//call the real value binding
ko.bindingHandlers.value.init(element, realValueAccessor, allBindingsAccessor, context);
},
update: function (element, valueAccessor, allBindingsAccessor, context) {
var realValueAccessor = function() {
return context[valueAccessor()];
}
//call the real value binding
ko.bindingHandlers.value.update(element, realValueAccessor);
}
}
So, this would validate that your object has the field, if it does not it creates a new observable for that field. Then, it hands it off to the real value binding.
A very similar (but less verbose) alternative to this would be to have the binding ensure that the field is there and then rewrite the binding attribute to use the real value binding. Something like:
//Another option: rewrite binding after making sure that it is initialized
ko.bindingHandlers.valueWithInit = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
var value = valueAccessor();
if (!context[value]) {
context[value] = ko.observable();
}
$(element).attr("data-bind", "value: " + value);
ko.applyBindings(context, element);
}
}
Both of these assume that the field that you are passing is directly off of the object that is the context of your template (so, it wouldn't work if you passed something with global scope like 'viewModel.someProperty').
Here is a working sample with both options: http://jsfiddle.net/rniemeyer/dFSeB/
I would rather not pass the field as a string, but there is not really a good way around it that I see.
You'll be better off ensuring that the object passed to the template has all the parameters set in. If they are not then you can add default values but putting all this logic in the template is going against the MVVM pattern. The templates (like Views in mvc) are not supposed to contain any logic IMO.
I have 2 main questions.
Does extending things like Object count?
What is DOM wrapping?
http://perfectionkills.com/whats-wrong-with-extending-the-dom/
After reading that article I couldn't find anything about DOM wrapping, and no specification and what exactly is and isn't DOM extension.
No, Object is specified as part of the Javascript language, while the DOM is an API only relevant in a browser environment and is used to "access and update the content, structure and style of documents" (W3C).
However, one of the reasons provided in that article arguing against the extension of DOM objects still applies to extending native types such as Object - namely the chance of collisions.
Wrapping an object refers to creating a new object that references the original, but providing additional functionality through the new, wrapper object.
For example, rather than extending a DOM Element object with a cross-browser addClass function like this:
var element = document.getElementById('someId');
element.addClass = function (className) {
...
};
You can instead define a wrapper function:
var ElementWrapper = function (element) {
this.element = element;
};
And add the function to its prototype:
ElementWrapper.prototype.addClass = function (className) {
...
};
And "wrap" elements like this:
var element = document.getElementById('someId');
var wrapped = new ElementWrapper(element);
wrapped.addClass('someClass');