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>
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.
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.
In vue 1 it was possible to do this:
<app v-ref:test-app></app>
and then reference it like so:
vm.$refs.testApp;
however in vue 2 the syntax for the ref has changed to:
<app ref="test-app"></app>
but this no longer can be referenced by
vm.$refs.testApp
instead it only works if:
<app ref="testApp"></app>
which in standard DOM stuff isn't allowed. Is it a bug? can kebab case no longer be used?
Since the syntax has been changed from that of a namespaced element attribute (i.e., v-ref:foo-bar) to a normal key-value-pair attribute (i.e., ref="fooBar"), the implicit kebab-case-to-camel-case conversion is no longer applicable because the reference name is a plain string and is not constrained by having to conform to the requisite lowercase-kebab-case HTML syntax.
In other words, you can identify a ref with any string, so it wouldn't make sense for Vue to manipulate it. Have a look at this CodePen for an example in action of what I mean.
But, basically, a plain string ref value means you can define a reference like this:
<div id="app" ref="test ** app!"></div>
and reference it from Vue like this:
this.$refs['test ** app!']
In short, no, it's not a bug but no, automatic kebab-case conversion no longer takes place.
I'd like to do something like this:
dojo.place(this.message.subject, this.apSubject);
But it throw exception in Dojo 1.7 (I'm completely new to Dojo so I don't know if the same problem is under older versions)
To get it work I did:
dojo.place('<span>' + this.message.subject + '</span>', this.apSubject);
It looks like Dojo parse the first parameter of dojo.place and if there is no HTML it throw exception.
How to use it without spans?
Check the docs, In particular, the description of what the first argument receives:
dojo.place(node, refNode, pos)
node
Can be a String or a DOM node. If it is a string starting with “<”, it is assumed to be an HTML fragment, which will be created. Otherwise it is assumed to be an id of a DOM node.
Therefore, one things you can do is create a text node with the text you want
dojo.place( document.createTextNode(this.message.subject), this.apSubject)
And another thing you could try would be setting the innerHTML instead of using dojo.place:
this.apSubject.innerHTML = this.message.subject;
BTW, In my humble opinion, dojo.place is normaly kind of annoying to use. However, since I am not often doing this kind of DOM manipulation, I don't really know what are the alternatives people prefer to use.
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