Understanding Blazor props syntax - razor

I know C# but been mostly programming React lately, I'm now looking at Blazor and trying to understand its quirky syntax.
I'm seeing in different examples that when passing props (attributes) to components an # sign is being used in various locations:
examples I've seen:
before attribute value, inside quotes
<Component title="#SomeValue"/>
before attribute value, no quotes
<Component title=#SomeValue/>
before attribute name
<Component #title="SomeValue"/>
What are these? I noticed that having no # often works the same as with it. Official documentation doesn't go to depth re this

I'm seeing in different examples that when passing props (attributes) to components an # sign is being used in various locations
Yes, this has changed a few times over the preview releases. As a consequence, some blogs and samples will be out of date. So first thing to check: how old is this code or article?
The official docs don't talk about those changes but they are up to date with the latest version.
The main changes were in preview6 : "In this Blazor release we’ve standardized on a common syntax for directive attributes."
My simple summary: Blazor attributes (directives) start with #, normal HTML attributes do not.
The values of those attributes (binding or eventhandler) do not need a #
In a later preview it was determined that attibutes should be case-sensitive.

Related

Where exactly does trainable_variables method belong in Tensorflow?

I'm a newbie in both deep learning and tensorflow and now trying to learn how to implement deep learning codes based on function API (not keras) by following example codes.
Inside the codes I'm looking at, I found out sources saying 'gradients=tape.gradient(loss,model.trainable variables)'
I intuitionally got what trainable variables mean, however in order to understand clearly,I tried to search on tensorflow documentation (which module or class the method belongs to, which are key arguments, etc) ,but I wasn't able to find the information I want. ('trainable variables' method was not in their documentation index and I'm wondering why)
So can anyone please tell me the module/class which trainable_variable method belongs to, and which arguments it takes, and also how it is able to judge and get all the trainable variables from the model ?
The reason you did not find this method is because trainable_variables is not a method, but an attribute/property. The Model class has a trainable_variables attribute, which is not documented officialy. It is inherited from the base class Layer, and to put it shortly, the list (of trainable variables) gets populated as new layers are added, since all layers have an init parameter trainable (this comes from base class Layer too). You can check the source code if you want to: "the source of the property", "adding new weights to layer appends to the list".

Custom JSON renderer in AEM/Sling

I've been playing around with this for a while now, and I think, I've - almost - cracked it, but I am still not fully satisfied with my solution.
So, what I want to do, is having a piece of content, a list of items, which would have two views: The standard HTML one, so people can view and edit it; and then a JSON endpoint for other services to consume.
First I thought it's a simple matter of creating two JSP scripts to render the content:
/apps/my-stuff/components/list-page/html.jsp
/apps/my-stuff/components/list-page/json.jsp
However the Apache Sling DefaultServlet seems to be rather ignorant of the json.jsp script.
As a second attempt, I created another script, in /apps/foundation/components/primary/cq/Page/json.jsp which will be actually called, and renders the page, as I expected. However there are a couple of worries/questions regarding this:
First of all, why is this being honoured by the system, and not the one in the more specific place?
The documentation states, that to find the appropriate renderer, first sling:resourceType will be inspected, then sling:resourceSuperType and then, only as a fallback will jcr:PrimaryType checked. However I think this is rather: jcr:PrimaryType, then the DefaultServlet, and then all the other things.
Most worryingly however, I have to admit, this is rather generic, so it'll break all the contnet with jcr:PrmaryType = Page, so that could have some side-effects.
A solution could be creating a new type: ListPage extends Page; and then create a renderer for that in /apps/foundation.... However I have this bad feeling, that might introduce other problems.
So my question is two fold: What is the proper way of doing this, and/or what am I missing from the way the URL -> script resolution is working in AEM/Sling. (Because it seems to be slightly different that described here and here.)
(Obviously I am trying to keep the default JSON renderer for other pages, as that might be needed for other things in the page. I am not even sure, changing this one page won't break the UI for this particular page...)
However the Apache Sling DefaultServlet seems to be rather ignorant of the json.jsp script.
Have you tried renaming your JSP like so: "list-page.json.jsp"?
If you're using AEM 6.3, you should look at Sling model Exporters. They allow you to automatically register a servlet against your Sling Model (that you can create to model your list content). That servlet can generate a JSON representation of the model for you using Jackson.
If you're not using AEM 6.3, I would suggest you create a servlet registered against your resource type and use an additional selector.
#SlingServlet(
selectors = "json",
resourceType = "my-stuff/components/list-page",
methods = "GET")
More information on Sling Servlets can be found here.

om.next: how to have multiple components that use the reconciler

I'm new to om.next (and to clojurescript), and I have the following question. I can only get the root component to be invoked with the reconciler (i.e. have its query method invoked); every other component seems to need to be invoked with props and with om/factory. I think I'm missing something.
I am attempting to create a todo list app (100 points for originality!), with a filter to show completed/incomplete/all items. If my TodoList component is the root component, I can invoke it with query: [:todos] with no problem. I'd like to have a different root component, and also have a Filter component that goes through the reconciler.
Possible options I can see:
have multiple om/add-root! calls (this prevents us from having nested components that use the reconciler, and is not the pattern that I see in tutorials)
wrap everything in a global component and pass state down through props. But the examples make read a multimethod, which doesn't jive with this approach.
Is this possible? Thank you!
If you haven't already please take a look at Components, Identity & Normalization · omcljs/om Wiki · GitHub. This tutorial shows how to organize a multi-component application under a single root - and it should also make clear how read, mutate, Ident, IQuery, etc. are being used by each individual component to coordinate interaction with the one-and-only app state via the reconciler. The app-state is basically the application's database - using nested data structures inside a single Map.
React applications typically only have a single root component - if there are multiple roots they are typically organized by routes, i.e. one root per route (see also Top-level React Components — Medium).
Also: Om/Next: The Reconciler — Medium
The concept behind Om Next (and others such as reframe) is that there is one source of truth - your app state. With Om Next the UI of your application is made up of one (upside down) component tree. During rendering your app state is loaded into your Root component by Om Next interpreting its static query. This app state is received as 'props'. It is your job to pick these props apart and hand 'sub props' down the rest of the tree. You do this in the render method of each of your components.
So your second option is the way to go. reads are related to keywords that are in your static component queries. If you make sure that your state is in default db format, then in fact every read can be implemented the same way, making use of db->tree. Having a global component and making every read a multimethod are unrelated concepts, and thus not incompatible. In fact having both is quite idiomatic.
There are ToDo application examples already that you may wish to look at for reference: here and here.
One thing to note is that your Root component query will use joins to include the other components, so your query [:todos] does not look right to me. Something like [{:todos (om/get-query TodoList)}] would be better :-)

Force function documentation in Doxygen for documenting JavaScript API

I use Doxygen for documenting the JavaScript API of my C++ (Qt) project. The idea is to write one specific documentation for the JavaScript interfaces, and one for the C++ classes us usual.
One example (datasource.dox) looks like this:
\addtogroup JavaScriptAPI
#{
...
\class DataSource
\brief DataSource is the .... some doc goes here ....
\section formats Supported formats
....
\fn isOpen()
\brief returns true if the data source is currently open...
...
#}
The generated help looks nice w.r.t. the class description (or 'object'-description), but the function documentation (isOpen(), ...) is missing. Doxygen creates warning messages like:
Warning: documented function `bool isOpen' was not declared or defined.
The question, now: can I somehow force doxygen to use my \fn-d function descriptions? It would be nice, if doxygen created all those member indices for me...
Two approaches for using doxygen with Javascript are listed here http://www.doxygen.org/helpers.html
(look for JavaScript)

What is a language binding?

My good friend, Wikipedia, didn't give me a very good response to that question. So:
What are language bindings?
How do they work?
Specifically accessing functions from code written in language X of a library written in language Y.
Let's say you create a C library to post stuff to stackoverflow. Now you want to be able to use the same library from Python. In this case, you will write Python bindings for your library.
Also see SWIG: http://www.swig.org
In the context of code libraries, bindings are wrapper libraries that bridge between two programming languages so that a library that was written for one language can also be implicitly used in another language.
For example, libsvn is the API for Subversion and was written in C. If you want to access Subversion from within Java code you can use libsvn-java. libsvn-java depends on libsvn being installed because libsvn-java is a mere bridge between the Java programming language and libsvn, providing an API that merely calls functions of libsvn to do the real work.
Okay, now the question has been clarified, this isn't really relevant so I'm moving it to a new question
Binding generally refers to a mapping of one thing to another - i.e. a datasource to a presentation object. It can typically refer to binding data from a database, or similar source (XML file, web service etc) to a presentation control or element - think list or table in HTML, combo box or data grid in desktop software.
...If that's the kind of binding you're interested in, read on...
You generally have to bind the presentation element to the datasource, not the other way around. This would involve some kind of mapping - i.e. which fields from the datasource do you want to appear in the output.
For more information in a couple of environments see:
Data binding in .Net using Windows Forms
http://www.codeproject.com/KB/database/databindingconcepts.aspx
http://www.akadia.com/services/dotnet_databinding.html
ASP.NET data binding
http://support.microsoft.com/kb/307860
http://www.15seconds.com/issue/040630.htm
http://www.w3schools.com/ASPNET/aspnet_databinding.asp
Java data binding
http://www.xml.com/pub/a/2003/09/03/binding.html
Python data binding
http://www.xml.com/pub/a/2005/07/27/py-xml.html
General XML data binding
http://www.rpbourret.com/xml/XMLDataBinding.htm
In Flex (Actionscript 3). Source
A data binding copies the value of a property in one object to a property in another object. You can bind the properties of following objects: Flex components, Flex data models, and Flex data services.
The object property that provides the data is known as the source property. The object property that receives the data is known as the destination property.
The following example binds the text property of a TextInput component (the source property) to the text property of a Label component (the destination property) so that text entered in the TextInput component is displayed by the Label component:
<mx:TextInput id="LNameInput"></mx:TextInput>
...
<mx:Label text="{LNameInput.text}"></mx:Label>
Data binding is usually a simple way to bind a model to user interface components. For example, you have a class with a FirstName property. In flex you could easily bind that property to a textbox by setting the value of the textbox to {Object.FirstName}. Then, every time that FirstName property changes, the textbox will be updated without requiring you to write any code to monitor that property for changes.
Hope that helps.
Matt