I'm tryng to compare some differents frameworks (angularjs, flux+reactjs and emberjs) doing a minimal todo list application.
You can find my code here:
https://github.com/jurgob/todo_test
(in the flux directory you can find the implementation)
I would like to programmatically fill and send the form to add an item to my todo list.
this code works for angular and emberjs:
$('.addItemText').val('test'); $('.addItemText').change();
$('.addItemBtn').click();
but not for reactjs.
I've also tried with sendkeys jquery plugin (https://github.com/dwachss/bililiteRange/blob/master/jquery.sendkeys.js) without any success.
here is my flux implementation:
https://github.com/jurgob/todo_test/blob/master/flux/main.js
as additional note: I've build a casperjs script to performe them from an headlerss browser, and using casper.sendKeys function it works for all the framework (you can find the code here https://github.com/jurgob/todo_test/blob/master/tests/maintest.js )
That code should work for react, however you can ditch jQuery in this example and use refs. More information about refs can be found here: https://facebook.github.io/react/docs/more-about-refs.html
In reality though you shouldn't be setting properties and triggering events on your own, use state to set properties, and you can submit a form request via XHR rather than filling out a form and simulating a click.
I also had a brief look at your code and noticed you were manipulating props directly, this is an anti-pattern, if you need to keep data in sync between different components consider either passing the components back upstream, creating a global eventemitter, or using a pattern like flux: https://facebook.github.io/react/blog/2014/05/06/flux.html
Related
I've never used react js and I have only dabbled with node's 'hello world' program.
I'm wondering if react works in such a way that if, say you add an <input type="text" /> tag, when you submit the form will react automatically handle the return of the data or do you need to separately write a client side .js file to handle the ajax data send to server?
Bonus: What is that type of framework called where it creates the two-way interaction automatically?
Apologies for what may be perceived as a basic question, but my beginner level comprehension of javascript hasn't completely got to grips with understanding what the docs actually mean.
Nope -- React is just a framework.
If you want to build a 'consolidated' javascript file that contains everything you need for your website, take a look at tools like webpack (or even better: create-react-app)
Form data is is submitted depending on how you structure your form, and that process is dictated a bit by HTML and a bit by your custom javascript.
To send AJAX based data, take a look at the 'fetch' API.
To manage the interaction between React, the data you're rendering, and other systems (like your server) take a look at Flux or Redux.
It really depend on how you write your application. React framework just render the "View" of your application.
Is you use a basical <form></form> with action the browser will automatically send the data into the "action" url attribute.
But you can just simulate a send of your form into a service/server/fake treatment and manage your return statement.
Well I never used React but, it's a javascript framework that has the same basic structure that Angular and Vue. Well REACT has directives that you can handle the data to send from the view into the component.js. If you want to send data to server you need to use libraries like 'axios' that you can import into you component and use it.
I have an Angular SPA but in it I'm using some non-angular library (Medium Editor [ME from now on] to be exact). I created a directive for ME so if I add a contenteditable element on my views, ME get's instantiated and works properly. So that's not a problem.
The problem is that I also created a special ME extension that requires to make web requests to my server in order to insert correct markup into ME's editable element. But to make these requests it requires some view-model's data and also communicate it back:
it needs to read and set (when undefined) my view model ID
it needs to constantly manipulate some other view model value in order for my SPA to know that it's still processing so other processes get postponed
I thought I'd simply include input type="hidden" ng-model="..." on my page and change its value and trigger input event so Angular would update its model. Hidden input of course doesn't work. So I changed it to input type="text" class="hidden" and keep the functionality.
This does work, but it doesn't seem to be the proper way of doing things as it's hackish. And this mainly works for model value exchange (get/set). How about if I would have to call some controller function? Is that even remotely possible?
I don't want to make ME's extension to rely in any way on Angular library as it has to be purely ME extension and should be reused in non-Angular SPAs (maybe some other lib SPA or just pure simple DHTML web app). But I would like to make it usable in SPAs as well as ME can easily be used to manipulate some element's markup that can be set to view model through a directive.
What it the proper way of communicating with Angular app from external libs that aren't native to Angular?
Additional info
Basically I want to have 4 functions in my custom extension that should somehow access (and manipulate) my Angular view model:
getReferenceId() and setReferenceId(id)
incrementPending() and decrementPending()
Pending counter could be exposed publicly and accessed by my Angular SPA, so it wouldn't process data while extension is still doing its own stuff. But SPA doesn't have any authority over when to set reference ID so it would correctly be read by the extension...
This is usually solved by wrapping external plugins (or their parts) in ng services and directives. You don't need the input tag, just put the data on scope and after changing from non-ng code call $scope.$digest. If you need to watch for data change to trigger something in external library, you can use either ng-change or $scope.$watch.
Is it possible to create javascript elements like OpenStreetMap or jQuery inside a vaadin application?
Because vaadin websites are created by programming in java and letting the compiler autocreate the DOM and JavaScript out of it?
So, is it possible at all?
You can create such an integration with AbstractJavaScriptComponent
The basic idea here is to subclass this class, annotate with #JavaScript to pull in the needed JS libs. Then write at least a global function, that sets up your lib in the DOM (you will have a <div> at your disposal). Your component can hold state, the server side can call defined functions on the client (while sending e.g. state) and the client can call server functions (params passed as JSON).
The Wiki has an example how to include such a component
There are some easy and cheap solutions which are not the best in the long term, but they may be enough:
1)
If you just want to render some html you cant insert it as the value of a label and change its Content Mode to html.
https://vaadin.com/book/-/page/components.label.html
2)
If you just want to execute some javascript code after a ui event you can call Javascript.getCurrent().execute(javascriptCode).
https://vaadin.com/book/vaadin7/-/page/advanced.javascript.html
Notice that if you are trying to do some re-usable components, this is not the right answer
I have a strange problem. I have a custom JS file written and all of its functions work fine until I run any ADF's JS action. For example - I have an action which slide down a component and it's fine. But when I run a adf popup or Faces Error Message all of my custom JS are disabled. Where is the problem?
Thanks in advance
Since you ain't giving any details on your problem, I can give only common answer.
When using custom js, you should always keep in mind, that any ADF action may overwrite all or part of html code on the page.
You should always set property clientAttribute=true for component, if you accessing it via js. Use actionListener instead of regular js handlers on component if possible or each time component refreshes you should reinitilize all of your js hooks.
Good way to avoid problems is to do all you can via ADF JS framework.
Check with any js debugger(like firebug) whats going on the page during your action and act accodingly.
You can get more info in documentation.
I am new to Ember.js and am trying to figure out how to piece things together at this point. One component I built, since I need a re-usable "widget" to use across many portions of my application, is a "site nav" widget. Basically, it's almost like the buttons/links you see in StackOverflow when you open a new question titled: "Questions Tags Users Badges Unanswered". In my app, these links have a name and id associated with them on the server-side. I want to be able to use this navigation widget on multiple parts of my app and it should be as simple as putting:
{{site-nav}}
into a template. I got that part working just fine, but the navigation is currently hard coded in handlebars. My question is, for a component, where is the right place to retrieve/populate model data from the server? For a controller, we do it directly from the controller's route definition. The component is not associated with a router. In fact, it can be re-used, as mentioned before, in several parts of the app.
I want to be able to drop this component into templates and have it populated with modeled nav from the server which has the name/IDs of the navigation I need. Where is the best place to do this? I'm guessing I'll still extend from something like DS.Model, but I'm not entirely sure where/when/how to integrate this with the component. When do I create the model and invoke a .find() type call to the server to populate site-nav with data?
you can pass value to component Passing properties to component
via handlebars.
{{my-nav navlist=listfromserver}}
so the list from server is in our controller can be passed to the component