My specific situation for this question involves transforming inbound links into LinkComponents that use actions to scroll, but it's perhaps better to generalize it: what's the proper method to convert inbound REST data into an ember component?
An example: say I have the string Foo anchor link coming in from data source of choice. I have written a custom adapter and serializer to properly transform the inbound data to jsonapi standards, and I've defined a model to store it.
I wish to convert these anchors to components, or in general, to something that contains 'data-ember-action', much like all the template-rendered content that already exist elsewhere in my app. For awhile I believed that RenderBuffer was the solution to my problem - simply create the component I wish to replace the anchor substring with, render it to a RenderBuffer, and use that to get the corresponding string output that I can then insert in the content. I have a (possibly unfounded) suspicion, however, that this is oversimplifying the problem, and neglects certain internal operations that occur behind the scenes during template rendering in Ember. It also appears that RenderBuffer is deprecated, meaning that even if this is a viable approach currently, it is not the appropriate way to do this.
Anyone have any advice on how to approach this issue?
Related
Our Application has components which consume components with consume components of varying complexity. So i just want the input on the page, to validate when an object is set that the text is correct. The issue is that it is one of these subcomponents.
My colleague told me that there is 2 ways to do this, The first is to use Page Objects, and Chaining annotation to find it on my page, and then find the next id etc until my input is found. It requires me to look through another teams' Component Markup to narrow it down to the input i want to leverage. I dont believe I should have to go into another component definition, or a definition of a definition to get the appropriate chain to get this arbitrary input. It starts to create issues where if a lateral team creates changes unbeknownst to me, my PO will be broken.
The other option my friend asked was to use fixture.query to find the component. This would be as simple as:
fixture.query((el)=> el.attribute["id"] == "description",
(comp){
expect(comp.value, value);
});`
Using Query looks at the markup but then will automatically componentize it as the appropriate SubComponent. In this case, comp.value is the value stored in the HTML. So, if i did something like:
fixture.update((MainComponent comp) {
comp.myinput.value = new Foo();
});
Then I am setting and getting this programmatically, so i am a bit unsure if it properly would reflect what is on the screen.
Whats the best course of action? It seems PO would be better, but im not sure if there is a way around having to deep query for input boxes outside of the component i am testing.
Thanks
I don't think I have a definitive answer for you but I can tell you how we do it at Google. For pretty much any component we provide the page object alongside the component. This is twofold it is for testing that widget, and also so we can have this as a shareable resource for other tests.
For leaf widgets the page objects are a little less fleshed out and are really just there for the local test. For components that are shared heavily the page object is a bit more flushed out for reusability. Without this much of the API for the widget (html, css, etc) we would need to consider public and changes to them would be very hard (person responsible for making the public breaking change needs to fix all associated code.) With it we can have a contract to only support the page object API and html structure changes are not considered breaking changes. At times we have even gone so far as to have two page objects for a widget. One for the local test, and one to share. Sometimes the API you want to expose for a local test is much more than you want people to use themselves.
We can then compose these page objects into higher level page objects that represent the widget. Good page objects support a higher level of abstraction for that widget. For example a calendar widget would let you go to the next/previous month, get the current selected date, etc. rather than directly exposing the buttons/inputs that accomplish those actions.
We plan to expose these page objects for angular_components eventually, but we are currently working on how to expose these. Our internal package structure is different than what we have externally. We have many packages per individual widget (page_objects, examples, widget itself) and we need to reconcile this externally before we expose them.
Here is an example:
import 'package:pageloader/objects.dart';
import 'material_button_po.dart';
/// Webdriver page object for `material-yes-no-buttons` component.
#EnsureTag('material-yes-no-buttons')
class MaterialYesNoButtonsPO {
#ByClass('btn-yes')
#optional
MaterialButtonPO yesButton;
#ByClass('btn-no')
#optional
MaterialButtonPO noButton;
}
While going from one route to another, I want to pass some data (especcially arrays). How is it possible?
Why can't we use query-params with arrays?
Is it a problem storing data in a specific service during transition?
Note:
I know there are some old questions those are nearly the same with this question. But their selected answers are no more applicable for Ember 2.x. Those questions are: 1, 2.
I´m not sure if queryparams won´t work with arrays as I only used it with single ids, but it would not be a good solutions even if it worked, there´s a limit on how much you can send by parameters and you should not bother any user with your data.
Just create a model to save your data for local use, so you can simply use the ember store
Use a service you´ll have to inject in every controller you want to use your data
I would prefer the model/store variant so you´ll be able to observe and just follow the normal flow which is also good if someone else has to maintain your code.
UPDATED
After testing with "transition.data"; not updating the history seems as a problem for us. So we again use "queryParams". The constraint is: do not pass a complex object between routes
OLD ANSWER
I'm using transition object for this purpose in an action while routing as the following:
let transition = router.transitionTo(route, model);
transition.data[propName] = propValue;
Also I wrote a component to use this code as link-to.
I have a helper that--at the moment--simply converts markdown formatted text into proper html. In addition to that, I want to pass it a pair of text indexes. The text between these indexes will be sliced out, plopped into a component, and then reinserted. The user will then be able to click on that text and interface with it like it was that component.
The problem is, I have no idea how (or if it's even possible) to insert a component into text that's being processed by a helper. For that matter, is it possible to do at all, even outside of a helper?
If I understand your question correctly, it sounds like what you may be looking for is a view or component, rather than a helper. A helper is a lower-level piece of functionality which is invoked towards the end of the rendering process. It is quite isolated in terms of what it can access or do. Ember helpers (in contrast to pure Handlebars helpers) are quite sure that their job is to insert a stream of HTML text into a view's buffer. For instance, you cannot easily capture the text returned from a helper and decide to do something else with it. You certainly cannot build views or invoke components from within the helper. To put it a different way, by the time a helper is called, you are far past the point in the Ember control flow where it wants to be creating components or other view-like objects.
What I am trying to create is a site for resources. Basically, you add resources such as books and videos via links. Now, with any resource site that caters to a variety of resources, you need to tag them in order to understand what kind of resource you are using.
For example, if you make notes on something like Chemistry or key points from a talk on lets say "Django", then these are text documents. Thus you would want them inside a TEXT TAG.
So, when you are making a form for this kind of thing, what form field would you use? For example, by knee-jerk approach is to simple make a text area field, and then separate the different tags via comma. Now, this can be prone to many problems, I'd just like to know what is the best approach to take to solving this problem? Basically, an easy way to validate the data input? Would forms.ChoiceField be the best approach to the problem or is there something else that is superior?
https://www.djangopackages.com/grids/g/tagging/ is your best bet, most specifically https://github.com/alex/django-taggit. If you want to run your own tagging system, take a look at the source code for some ideas.
EDIT: The easiest way to display this in a form would be to use a ModelMultipleChoiceField. This allows you to select multiple tags for a single resource, and handles server-side validation and conversion to the actual Tag instances. However, I think most people would agree this option looks hideous, and it is certainly not user-friendly if there is a large amount of possible tags.
If you're using jQUery, another option is to use Django_select2. This is what I have personally used in a similar situation, and it handles a large amount of possible tags very well. Django_select2 is a thin wrapper around jQuery's Select2 plugin, with a bit of added functionality (most notably the AutoView and AutoModelSelect2Field). This provides a hybrid between a text field and a select list, allowing you to search all tags and easily select multiple tags. See http://ivaynberg.github.io/select2/ for examples of what you can achieve.
I would like to dynamically build a form to edit a set of properties (say from a xml file or so).
On top of that, I would like to perform validation for each property (mandatory values/optional values) with a set of rules (ideally also dynamically loaded).
These rules could be associated to a single field (allowed values, range, ...) but could also link several fields (conditional validation).
I would like to be able to save the results "on the fly" (as soon as a field loses focus).
Does someone have a good lead to get me started?
Here is what I found so far:
I could start from the Qt property browser framework for the dynamic form generation. I could extend this framework to suit my needs.
Regarding the validation, I read about QValidator which seems to be a good start. However, I couldn't find anything involving several fields (cross-parameter validation)
The QSettings framework does this auto-save feature quite nicely and I guess I could reuse that.
I just wanted to be sure I am not missing some existing framework to deal with my goals since
it seems like a relatively standard thing to do.
Assuming that the fields of the form are fixed. Then you could use a shared instance of a QValidatorto validate the text in all the fields by running your validaton over a list /dictionary /map containing pointers to the fields. The list/*dictionary*/map will have to by dynamically populated and cleared, and a pointer to it hard-coded inside QValidate::validate. And if QValidator sharing is not allowed you will have to create individual ones and execute your cross-field validation.
Alternatively, you could use Qt's Signal-Slot mechanism to implement your validation whenever the text in your field is changed.
I had no idea of QSetting, and would have used the very same signal-slot mechanism to do the autosave.