In my JSX code I have attribute name that has colon in its name but vscode shows error. Even after formatting my code, vscode automatically create a space after colon. How to solve these two problems?
By not having colon in your attribute name. While technically possible, attribute names should be camelCase.
If you can't get around this, you could create and object and destructure it onto props.
const A = () => {
const fooProps = {
'on:resize': onResize
}
return <Foo {...fooProps} />
}
Related
I have a single line code which removes trailing and leading whitespaces, and also replaces multiple spaces in between with a single space. (from a string)
value = value..trim()..split(" +")..join(" ");
However I am getting the following error.
The method 'join' isn't defined for the type 'String'.
Try correcting the name to the name of an existing method, or defining a method named 'join'.(dartundefined_method)
What i am doing wrong?
You don't need cascade notation there:
value = value.split(' ').where((x) => x.isNotEmpty).map((x) => x.trim()).join(" ")
I forgot adding RegExp.
value = value.trim().split(RegExp(" +")).join(" ");
is working!!
I have created a small snippet in Script Lab which basically:
Creates a custom XML:
<AP xmlns="accordproject.org">
<template xmlns="acceptance-of-delivery">
<shipper>Aman Sharma</shipper>
</template>
</AP>
Tries to query this xml by using the xPath /AP/template. I run this block of code:
await Word.run(async context => {
const customXmlParts = context.document.customXmlParts;
const AP = customXmlParts.getByNamespace("accordproject.org").getOnlyItemOrNullObject();
await context.sync();
const nodes = AP.query('/AP/template', {}); // how does this work?
await context.sync();
console.log(nodes);
})
Deletes the customXML.
The second argument of query API is namespaceMappings. I think I am passing that incorrectly and that's why I get this as ouput (empty object).
But when I pass * instead of /AP/template, I get the whole XML (while the second argument, namespaceMappings remain the same).
Where am I going wrong? Can anyone share some snippets to help me query customXML.
The short answer is that you can use
const nodes = AP.query("/n1:AP/n2:template", {n1:"accordproject.org", n2:"acceptance-of-delivery"});
I don't know JS/TS at all but I assume these are basically key-value pairs of some kind. You can also use
const nodes = AP.query("/n1:AP/n2:template", {"n1":"accordproject.org", "n2":"acceptance-of-delivery"});
if you prefer to think of the Namespace prefixes as strings.
(For anyoneunfamiliar, the "n1" and "n2" are just prefixes that you invent so you can reference the full Namespace URIs. They don't have anything to do with any prefixes you might have used in the piece of XML you are querying.)
I couldn't find documentation on this either and originally assumed you might need something more like { Prefix:"ns1", namespaceURI:"the namespace URI" }, but that's just because those are the property names used in the VBA model.
\Templates\Snippets\Search.html
<f:form id="snippetSearchForm"
action="search"
controller="Snippets"
extensionName="snippet_highlight_syntax"
pluginName="feshs"
name="searchSnippets"
method="POST"
pageType="5513">
<f:form.textfield class="form-control" property="searchWords"/>
<f:form.submit id="searchBtn" value="Search"/>
</f:form>
SnippetsController.php
public function searchAction()
{
$arguments = $this->request->getArguments();
\TYPO3\CMS\Extbase\Utility\DebuggerUtility::var_dump($arguments);
}
ajax.js
$("#snippetSearchForm").submit(function (event) {
event.preventDefault();
var form = $(this);
var action = form.attr("action"),
method = form.attr("method"),
data = form.serialize();
$.ajax({
url: action,
type: method,
data: data,
cache: false
}).done(function (data) {
console.log(data);
}).fail(function () {
( "div.tx-feshs" ).replaceWith("errorMessage");
}).always(function () {
});
});
Request URL
index.php?id=148&type=5513&tx_snippet_highlight_syntax_feshs[action]=search&tx_snippet_highlight_syntax_feshs[controller]=Snippets&cHash=4662b6b5a3fa0dc4e590e8d5c90fa
I can't solve this problem with getArguments(). The response and console.log are (empty). Seems like I'm missing something but I can't pinpoint where :/
You have a few common errors in your code and most of them has already been mentioned here, but please allow me to sum up.
Extension key/name
First, a lot of people confuses extension name with extension key. The directory name of your extension is your extension key, in this case snippet_highlight_syntax. The extension key is used all over TYPO3 as the unique identifier of your extension. With Extbase a new convention did come along called extension name to satisfy PSR2 coding convention and is primarily used in Extbase context. The extension name is a upper camel case edition of your extension key.
ExtbaseFluidBook: CodingGuidelines - It´s a bid old but still valid
The name of the extension in UpperCamelCase. For example, if the extension-key is blog_example, then this part of the classname is BlogExample.
Extension key: snippet_highlight_syntax
Extension name: SnippetHighlightSyntax
Be aware of what the TYPO3/Extbase framework asks for, key or name - it will help you a lot.
Plugin name
You have also declared a plugin named feshs. According to the DocBlock documentation of both \TYPO3\CMS\Extbase\Utility\ExtensionUtility::(configure|register)Plugin() methods it should, as with the extension name, be in upper camel case format like Feshs. It´s not well documented and I do not think it has any negative impacted on your application jet but now you knows and has a change to future proof your application by correcting it.
/**
* ...
*
* #param string $extensionName The extension name (in UpperCamelCase) or the extension key (in lower_underscore)
* #param string $pluginName must be a unique id for your plugin in UpperCamelCase (the string length of the extension key added to the length of the plugin name should be less than 32!)
* #param array $controllerActions is an array of allowed combinations of controller and action stored in an array (controller name as key and a comma separated list of action names as value, the first controller and its first action is chosen as default)
* #param array $nonCacheableControllerActions is an optional array of controller name and action names which should not be cached (array as defined in $controllerActions)
* #param string $pluginType either \TYPO3\CMS\Extbase\Utility\ExtensionUtility::PLUGIN_TYPE_PLUGIN (default) or \TYPO3\CMS\Extbase\Utility\ExtensionUtility::PLUGIN_TYPE_CONTENT_ELEMENT
* #throws \InvalidArgumentException
*/
public static function configurePlugin($extensionName, $pluginName, array $controllerActions, array $nonCacheableControllerActions = [], $pluginType = self::PLUGIN_TYPE_PLUGIN)
Plugin signature
Together with your extension name it will form a plugin signature called snippethighlightsyntax_feshs. This signature is the valued stored in the tt_content database table as list_type or ctype depending of the plugin configuration.
The plugin signature is further used in TypoScript and GET/POST arguments prefixed with tx_. In your case tx_snippethighlightsyntax_feshs.
Fluid & Extbase forms
In your form snippet you have declared a element <f:form:textfield /> with the property tag. The property tag is only used together with the object and objectName tags on the <f:form /> element and is used to bind values to this objects properties (autofill, validation result etc.).
See \TYPO3\CMS\Fluid\ViewHelpers\Form\AbstractFormFieldViewHelper::initializeArguments.
Name of Object Property. If used in conjunction with <f:form object="...">, "name" and "value" properties will be ignored.
In your case you should properly just use name in stead of property.
Your updated form should look something like below:
<f:form id="snippetSearchForm"
action="search"
controller="Snippets"
extensionName="SnippetHighlightSyntax"
pluginName="Feshs"
method="POST"
pageType="5513">
<f:form.textfield class="form-control" name="searchWords"/>
<f:form.submit id="searchBtn" value="Search"/>
</f:form>
Controller arguments
You should declare your arguments as controller arguments.
/**
* #param string $searchWords
*/
public function searchAction(string $searchWords = null)
{
if (is_string($searchWords)) {
// TODO: Do something here...
}
}
Note how I have given the argument a default value. This should suppress the error Required argument "searchWords" is not set for... you are getting.
This was a long write up. Hopes it helps your or some others.
Happy coding
$this->request->getArguments() will only return field value arguments that are prefixed with the extensions / plugins identifier like tx_anything_pi1[anything]
Please checkout if the "name"-tag of the fields is correct. Maybe those tags are wrong because you are reffering to a "property" of an object in your textfield but there is no object bound to your f:form tag.
Since the response should at least return the HTML of an empty debug, maybe something is wrong with your action. Can you call it in the browser?
First of all use name attribute instead of property in <f:form.textfield> tag.
Then you need to register argument as follows
public function searchAction(string $searchWords)
Furthermore PHP docblock must contain the parameter as #param string $searchWords. After clearing all caches in the Install Tool you should get your arguments.
Assumed your extension-key (=foldername) is "snippet_highlight_syntax" the parameter for URLs is usually like this:
tx_snippethighlightsyntax_feshs
That means all underscores of the extension-key are removed.
Probably it's possible to make it different, but that's not standard.
Therefore $this->request->getArguments() never returns anything.
You've to adjust the parameters in the url like this:
index.php?id=148&type=5513&tx_snippethighlightsyntax_feshs[action]=search&tx_snippethighlightsyntax_feshs[controller]=Snippets&cHash=4662b6b5a3fa0dc4e590e8d5c90fa
In the TypoScript-Object-Browser you should find your plugin with that name:
plugin.tx_snippethighlightsyntax_feshs
After many tries, I've sent the extension to test on another computer and it's working.
I've cleared all the caches, disabled/enabled, and so on. Seems like my environment is at fault.
Thanks to all of you for the help !
I have an application with a custom binding declared like
ko.bindingHandlers.slideContent2 = {
init: ...,
update: ...
}
and I use that in my html with (among other things)
<div data-bind="slideContent2: true"></div>
It works and produces no errors. Today I discover that the new knockout.js syntax checker in Netbeans 7.4 thinks that <div data-bind="slideContent2: true"> is in error. It objects to the digit 2. If I remove that, it thinks the name is fine. Looking around web examples, I haven't found an example of a digit used in the name of a custom binding.
Are digits legal in custom binding names? Is the Netbeans checker being overenthusiastic?
From the Knockout point of view every valid JavaScript identifier name is a valid custom binding handler name.
So you can have digits in custom binding handlers. For the full identifier name reference you can check: Valid identifier names
However from the Netbeans syntax checker point of view only letters are allowed in custom binding names.
For reference check out the source of KODataBindLexer (I've added some comments)
case IN_KEY:
if (!Character.isLetter(c)) { // the character 2 is not a letter
if (c == ':') {
state = State.AFTER_KEY;
input.backup(1); //backup the colon
return tokenFactory.createToken(KODataBindTokenId.KEY);
} else if (Character.isWhitespace(c)) {
state = State.WS_AFTER_KEY;
input.backup(1); //backup the ws
return tokenFactory.createToken(KODataBindTokenId.KEY);
} else { // 2 is not a the colon and not a whitespace so it returns Error:
state = State.INIT;
return tokenFactory.createToken(KODataBindTokenId.ERROR);
}
}
//stay in IN_KEY
break;
I'm loving wysihtml5 but I can't find any documentation about something as simple as adding a class to an element.
Basically what I'm looking for is a way to allow 2 different variations on the blockquote element:
blockquote.pull-left
blockquote.pull-right
(where each class specifies different style attributes)
So ideally I'd like to create 2 additional toolbar buttons that allow me to not only use the formatBlock command (to wrap the selection withing a blockquote element) but also specify the blockquote's class.
Any idea?
Try adding a custom function like this into a separate custom.js file for clarity:
wysihtml5.commands.custom_class = {
exec: function(composer, command, className) {
return wysihtml5.commands.formatBlock.exec(composer, command, "blockquote", className, new RegExp(className, "g"));
},
state: function(composer, command, className) {
return wysihtml5.commands.formatBlock.state(composer, command, "blockquote", className, new RegExp(className, "g"));
}
};
And then in your toolbar pass the class name through like this assuming the class is "pull-left":
<a data-wysihtml5-command="custom_class" data-wysihtml5-command-value="pull-left">Pull left</a>
You will also have to add any custom classes into the "whitelist" by going to the advanced.js file and adding them there under classes, otherwise the classes will be stripped out when you save.