I am using WebStorm as my IDE. It allows you to use VTL to create templates that you can use to quickly build React components.
I am writing one that created a quick arrow function component. I am almost done, but I am stuck on one part.
WebStorm exposes a variable called $PROP_TYPES. It takes the form of something like this:
{"onClick": "() =>", "isActive": "true", "editing": "false"}
With these being all the props that are passed in to a component.
I need a way to loop through these and get the keys only and save them in this format:
{onClick, isActive, editing}
As these will be the props for the component. The problem is my code is only printing off the first prop and that is it.
Here is my VTL code:
#if($PROP_TYPES) #set($prop = $PROP_TYPES.substring(0, $PROP_TYPES.indexOf(":")).concat("}"))#end
My $prop variable is displaying the wrong thing.
Related
I have a collection of requests I'm trying to improve and want to be able to use the Key-Value Editing UI in Postman, but I need to pass an object.
rest_data = {
"session_id":"{{sessionId}}",
"dealer_number":{{integralinkCode}},
"customer_id":"12345",
"vehicle_id":null,
"phone":"5555555555",
"amount":"0.01",
"reference_no":"test1234",
"asm_user_id":"{{userId}}",
"message":"test"
}
Currently, I have the key set as "rest_data", and the value holds the object. This works, but I feel like it makes it a bit hard to read. Ideally, I'd like to have the properties of the object as key-value pairs in Postman.
I tried setting the keys in Postman like this rest_data["session_id"] and the value equal to the relevant value, but that didn't work.
My reasoning is so that when making changes to the body, it's easier and I can fill in the description for values and what they should be. Also, you're not able to hover over environmental variables to see their values or use environmental variable autofill within the object.
Can this be done, and if so, how? I'm also open to alternative solutions.
New to ember.js -- used http://yoember.com/ to create a Demo ember.js site. I'm trying to figure out how to use Protractor to test certain elements, but I'm encountering issues specifying them.
Most, but not all, elements (buttons, text areas, etc) have a serialized id value: id='ember###' that changes every time the page is reloaded, which makes it impossible to indicate some elements in Protractor (like, element(by.id('ember557')).sendKeys('foo');).
Running a command like the one above will return the error: Failed: No element found using locator: By(css selector, *[id="ember557"]), which is due to the 3-digit id value changing.
In my demo app, I was able to go into the /app/templates/components/ file for that page and manually add something like id='name' into the handlebars input and was able to successfully find and test that element in Protractor.
This isn't ideal though, and I'd like to find a way to test sites that I don't have the ability to modify the html of.
Can anyone help me wrap my head around this? Thanks.
I have what I believe to be common but complicated problem to model. I've got a product configurator that has a series of buttons. Every time the user clicks on a button (corresponding to a change in the product configuration), the url will change, essentially creating a bookmarkable state to that configuration. The big caveat: I do not get to know what configuration options or values are until after app initialization.
I'm modeling this using EmberCLI. After much research, I don't think it's a wise idea to try to fold these directly into the path component, and I'm looking into using the new Ember query string additions. That should work for allowing bookmarkability, but I still have the problem of not knowing what those query parameters are until after initialization.
What I need is a way to allow my Ember app to query the server initially for a list of parameters it should accept. On the link above, the documentation uses the parameter 'filteredArticles' for a computed property. Within the associated function, they've hard-coded the value that the computed property should filter by. Is it a good idea to try to extend this somehow to be generalizable, with arguments? Can I even add query parameters on the fly? I was hoping for an assessment of the validity of this approach before I get stuck down the rabbit hole with it.
I dealt with a similar issue when generating a preview popup of a user's changes. The previewed model had a dynamic set of properties that could not be predetermined. The solution I came up with was to base64 encode a set of data and use that as the query param.
Your url would have something like this ?filter=ICLkvaDlpb0iLAogICJtc2dfa3
The query param is bound to a 2-way computed that takes in a base64 string and outputs a json obj,
JSON.parse(atob(serializedPreview));
as well as doing the reverse: take in a json obj and output a base64 string.
serializedPreview = btoa(JSON.stringify(filterParams));
You'll need some logic to prevent empty json objects from being serialized. In that case, you should just set the query param as null, and remove it from your url.
Using this pattern, you can store just about anything you want in your query params and still have the url as shareable. However, the downside is that your url's query params are obfuscated from your users, but I imagine that most users don't really read/edit query params by hand.
I concatinate my application code from multiple js files into one js file. Therefore I can't control the order, and to be honest would not want to. To specify a custom adapter with ember-model you need to create an instance of it like so:
App.User.adapter = Ember.CustomAdapter.create();
So if the CustomAdapter's code appears after the above statement I get the [Uncaught TypeError: Cannot call method 'create' of undefined] error.
App.User.adapter = App.CustomAdapter.create();
App.CustomAdapter = Ember.Adapter.extend({
// custom
});
Is there a way around this?
The order of code loading is very, very important. That's just a fact of life. You need to either figure out how to make your current tool load things in the order that you want, or you need a new tool.
I been trying to compare some values in handlebars if statement {{#if value == 'otherValue'}}, obviously unsuccessfully because handlebars do not like this and expecting a string, boolean, or function name. Well that would be ok, but then I tried to pass parameter in the function like you can do with {{action}} helper, and well that didn't workout either, got this in console
Error: assertion failed: You must pass exactly one argument to the if helper
So then I decided to do this in a View, even so ember js guides points that accessing template values in-scope is unusual and they provide only poor paragraph with no examples.
http://emberjs.com/guides/understanding-ember/the-view-layer/#toc_accessing-template-variables-from-views
So when I tried to do this, I got a problem of accessing those variables, I tried this way this.get('controller.templateVariables') and via full path to View, but value was either undefined or .get() wasn't exists as a method.
So at this moment I decided to save variable in the DOM data property, but turns out this {{#view App.TabsView data-title="{{tab}}"}} is going to literately give me a string {{tab}} when I try to access it from View with this.get('data-title').
The only way left to me was to insert additional element inside view and store variable there, and afterwards access it with jQuery class selector. but element is not yet exist in the DOM at the time of isVisible function gets executed, so I have no access to values at that time. That explains why this.get('element') was returning null.
Similar examples on ember js mostly ends up with something like if (someLogic) {}, but how I can do any logic when there is no variables available to me.
Question
To simplify my question - is there a way how I can do such a thing in ember js? Simple as
// have objects stored in controller
var obj = [{title:'Tab1'}, {title:'Tab2'}, {title:'Tab3'}];
// loop via them in the DOM
obj.forEach(function(tab) {
// do this kind of comparison
if( tab.title == currentTab() ) {
// do something here
}
});
If that is not possible, then what would be the other way to achieve similar functionality?
You can write a handlerbar helper to do this
{{activeTab tab}}
Handlebars.registerHelper('activeTab', function(tab) {
})
See a question about the same issue
Active Tab
Or look at existing helpers to write your own
Bind Helper
Template Helper
I think the best way for me to demonstrate this is with a heavily commented JSFiddle that I've put together for you: http://jsfiddle.net/PbLnm/
Please ask any questions below if you're not sure about anything.
The main part which determines when to add the active class is in the computed property:
// Determine if the object we have for this view is the same as the activeTab's object. If it is the same, then this view is the current active tab.
active: function() {
return Boolean(this.get('parentView.activeTab') == this.get('tab'));
}.property('parentView.activeTab')