Why this "value" can not be written as "pricevalue" or other, otherwise input will not convert non-numeric values
In the props element, you are defining the properties your component will attach to. You can call them whatever you want. You need to be clear about a couple of things...
You define the name here in camelCase, but when you call the component in the parent markup, use kebab-case.
methods only run when they are called. If you put your formatting on the downstream side (receiving a value and displaying it), everything will be reactive and all your values should display correctly. It will all just work whenever the source value changes. So do your formatting in a computed, like this...
js
computed: {
formattedPriceValue(){
return Number.parseFloat(this.priceValue).toFixed(2)
}
}
You can also just do it inline...
markup
<input type="number" :value="Number.parseFloat(priceValue).toFixed(2)">
The value you want to emit is probably the unformatted output of Number.parseFloat #change="$emit('price-changed', Number.parseFloat(event.target.value))"
Then, you will live longer if you do your number formatting with the Number functions provided.
Also, why don't you use the new template (multi-line) strings, delimited by a backtick `. They're much cleaner than the line continuation character you're using.
ps. I love seeing the chinese (?) comments in the code. I've copied and pasted them into my code. I hope there's no swearing. Unicode rocks.
Related
How can I use window size in Vue? (How do I detect the soft keyboard?)
The link above is an excellent answer but I don't understand what this (`) mark is and why the values for newHeight, oldHeight are passed in. Also why this syntax ${somevariable} in the watcher works.
windowHeight(newHeight, oldHeight)
this.txt = it changed to ${newHeight} from ${oldHeight};
...
The "backtick" syntax is not Vue specific, but it's a javascript language feature called Template literals. It's quite easy though: when you write a string like this:
const what = "world";
const salutation = `Hello ${what}`;
the value of salutation will be "Hello world". When the expression is evaluated, the interpreter swaps the ${what} with the actual content of the what variable.
You can learn more about template literals on MDN.
In the linked answer, it's used as a simple debug method to show what's going on.
I want to create a Live Template for createSelector:
export const someSelector = createSelector(getThis, getThat, getSomethingElse, (this, that, somethingElse) =>
$END$
)
I can get it to work pretty well with a single argument (e.g., only getThis which then results in (this) in the arrow function args).
// template text
createSelector($someSelector$, ($variable$) => $END$)
// variables
// expression for "variable":
decapitalize(regularExpression(someSelector, "get", ""))
This works correctly with a single argument as mentioned above, and almost works correctly with multiple arguments, except for the capitalization:
createSelector(getThis, getThat, getSomethingElse, (this, That, SomethingElse) => /* $end$ */)
I tried wrapping that whole thing in camelCase but then of course the commas and spaces are gone.
The issue is clearly that I'm processing the whole string at once so the whole string is run through whatever string formatting function. There doesn't appear to be any way to treat individual instances of "get" separately.
I tried capture groups which I really thought would work:
decapitalize(regularExpression(someSelector, "get(\w+)", "$1"))
But that doesn't replace anything, it just copies the whole thing:
createSelector(getThis, getThat, (getThis, getThat) => )
Is there any way to accomplish this?
UPDATE:
I even learned Groovy script and wrote the following, which works in a groovy playground, but gets in WebStorm gets the same result as my final example above!
groovyScript("return _1.replaceAll(/get(\w+)/) { it[1].uncapitalize() };", someSelector)
This could be done with RegEx .. but Java does not seem to support \l replacement modifier (to be used as \l$1 instead of $1 in your initial regularExpression() code).
Live example (works in PCRE2, e.g. in PHP): https://regex101.com/r/6faVqC/1
Docs on replacement modifiers: https://www.regular-expressions.info/refreplacecase.html
In any case: this whole thing is handled by Java and you are passing RegEx pattern or GrovyScript code inside double quotes. Therefore any \ symbols would need to be escaped.
You need to replace get(\w+) by get(\\w+).
The following seems to work just fine for me here (where someSelector is the Live Template variable):
groovyScript("return _1.replaceAll(/get(\\w+)/) { it[1].uncapitalize() };", someSelector)
In our code base we have a mixture of the following:
attribute="${something}", attribute="${something | converter}", etc.
attribute.bind="something", attribute.bind="something | converter"
I find the latter easier to read.
The examples I'm referring to are exactly like the above; i.e., they do not add any additional string content.
I think that it's easier on Aurelia too. Am I correct?
Also, for these specific cases where no actual interpolation is
involved, is there any benefit to the first form? (other than it is
two characters less to type.)
Given the examples you have shown, I would recommend using option 2. It really isn't "easier on Aurelia," but it is more explicit that you are binding the value of that attribute to the property listed.
Original Answer Below
The benefit of the first option is when you have, for example, an attribute that accepts many values but as a single string. The most common example of this is the class attribute. The class attribute accepts multiple classes in a space-separated list:
<div class="foo bar baz"></div>
Imagine we only want to add or remove the class baz from this list based on a prop on our VM someProp while leaving the other classes. To do this using the .bind syntax, we would have to create a property on our VM that has the full list but adds or removes baz as determined by the value of someProp. But using the string interpolated binding, this becomes much simpler:
<div class="foo bar ${someProp ? 'baz' : ''}"></div>
You can imagine how this could be extended with multiple classes being added or removed. You could maybe create a value converter to do this using the .bind syntax, but it might end up with something that wasn't as readable.
I could imagine a value converter being created that might look something like this in use:
<div class.bind="someProp | toggleClass:'baz':'foo':bar'"></div>
I really think this is much less readable than using the string interpolation syntax.
By the way, the value converter I imagined above would look like this:
export class ToggleClassValueConverter {
toView(value, toggledClass, ...otherProps) {
return `${otherProps.join(' ')} ${value ? toggledClass : ''}`;
}
}
The best part is that I'm still using string interpolation in the value converter :-)
After wading through the tabs I'd already opened I found this. Although it's not quite the same thing, and it's a bit old, there's a similar thing talked about on https://github.com/aurelia/templating-binding/issues/24#issuecomment-168112829 by Mr Danyow (emphasis mine)
yep, the symbol for binding behaviors is & (as opposed to | for value converters).
<input type="text" data-original="${name & oneTime}" value.bind="name" />
Here's the standard way to write a one-time binding. This will be a bit more light-weight in terms of parsing and binding:
<input type="text" data-original.one-time="name" value.bind="name" />
I don't know if it applies to the .bind/${name} case as well as the oneTime one in the example, but perhaps if it comes to his attention he can say either way.
Given this isn't a cut and dry answer, I'll be marking Ashley's as the answer as it confirms the legibility question and provides useful information on other use cases should anyone else search on similar terms.
Dojo's dijit html5 tags use an attribte name data-dojo-props. The value is basically a JSON string without quotes around the property names and without the outermost braces.
It looks something like this.
data-dojo-props="prop1:'xyz', prop2:true, prop3: { subprop1: 1, subprop2: 'abc'}"
I'm using C# to write this out from a C# object using JSON.NET and passing in the object pointer. I found settings to leave out the property name quotes, but I can't figure out a graceful way to remove the outside braces.
For now, I'll run the string through a regex to remove them, but was wondering if someone new a better way.
I serialize each top level property separately and make it a global javascript variable. I then reference that variable in data-dojo-props. I admit it's not that elegant.
My concern with your approach above, is if the value of subprop2 contains a quote, you will get a parser error.
<script type="text/javascript">
menuData = {THE SERIALIZED JSON GOES HERE};
</script>
<div data-dojo-type="SomeWidget" data-dojo-props="menuData: menuData"></div>
I am trying to set the toolbar item dynamically. So far I have a back button that resets the toolbar title to 'start' if the user chooses to go back.
But the following code won't work:
menuList.on('itemtap', function(dataView, index, item, e){
viewport.dockedItems.items[0].setTitle('{title}');
});
It tries to use a variable called 'title' out of my data store array. This works great for providing text to my Ext.List items. But the above code sets the toolbar title to the string '{title}' without even thinking of it being a variable.
Can you help me out?
List's use templates so items within curley braces get evaluated... you'll need to pass a reference to a variable without quotes. You haven't provided enough code for me to tell you where that information would be. If you already have a variable in scope called title that you put the data into then you can just reamove the '{ and }' ... otherwise you'll need to get the data you need from your store through some means, like Ext.StoreMgr or [appname].stores
Two things. 1) You will really want to get used to digging into the ST source code. In this case, if you look at the code for "setTitle", you will see that its argument is interpreted as straight HTML, not a template. So you can't use curly bracket syntax here. 2) Note that the type of the "item" argument to the event handler is an Element (i.e. ST's representation of the DOM object, not the selected datastore object. So that's not going to help you. However, the "index" arg gives you an easy way to get the appropriate object from the store. i.e.
[appname].stores.pages.getAt(index).title
I really don't know why, but it works if you put up to variables: One for the record and one for the value inside that record. There is a detailed explanation in the sencha.com-forum