I have an ember engine, and within that I have defined a route. It works as expected. It's called my-route. It was defined like this:
this.route('my-route', {path: '/my-route/:myparams'}); in the routes.js file.
As you can see, it has a dynamic segment, and shows different values based on myparams.
I want to add a nested route to this route. Let's say .../my-route/1 shows a list of items. When the user clicks on any of the items listed on the page, the route should be: my-route/display but instead its my-route/1/display. I don't want the 1 here as it could be misleading.
Also, the link-to doesn't open anything either, the click does nothing.
This is how I changed my routes.jsfile:
this.route('my-route', {path: '/my-route/:myparams'}, function() {
this.route('display');
});
In display.hbs file I added dummy data, and display.js is also empty, just extending from Ember.route.
The my-route.hbs links like this:
{{#link-to 'my-route.display'}} Open me {{/link-to}}'
I am new to EmberJS, and would appreciate if someone could please tell me how to:
Remove the dynamic segment information
Make the link-to work
Thank you!
1) I can think of no easy way to remove dynamic segment from the url -- if you must, you can probably just not use dynamic segment and send the information to the transitioning route via other ways - you can probably set the controller directly
"newRoute.controller.set('someProperty', my_param);"
or use needs api (http://emberjs.com/guides/controllers/dependencies-between-controllers/)
but note that both these methods would be making use of controllers. If you need to load data in the route depending on the query params, what comes to mind is using a service
But these methods are not very sophisticated and I'd say only go for it if dynamic segment is an absolute no.
2) this one is easier -- you need to pass in the dynamic part along with the route name when using link to -- as given in ember guide
https://guides.emberjs.com/v2.0.0/templates/links/
Based on the discussions with #Lux and #Chhirag Kataria, I ended up making two separate routes. I used the my-route as a dummy route, and nested the display and the list routes in it.
Related
We are investigating Stimulus.js for use with our Rails6 app and keep hitting conceptual walls in moving our thinking from jQuery to Stimulus.
For example:
On one part of the page we have a button and when that button is clicked we want to load content into a div on another part of the page. In jQuery this is simple - respond to click event, load in the part from the rails backend into that div.
In Stimulus, how to do this? It looks like everything needs to be in one big controller so that the button can see the 'target div'. So essentially we are writing 'page' controllers, which seems a lot of overhead. Also, it messes up the way we are breaking down the page into partials because now those partials need to share a Stimulus controller.
You definitely don't need to be writing 'page' controllers. The idea is that you write smaller controllers for interactive elements. If you post more about your use case perhaps we can help you split apart your controllers. You are correct though that the controller's element must contain any element registered as a target. Just remember you can access elements outside that context (e.g. in a completely different part of the page) using regular Javascript (in other words document.getElementById can give you access just as easily as using Stimulus targets)
To answer your question though, you can do something like this:
show() {
fetch("/path/to/partial")
.then((res) => res.text())
.then((html) => {
const fragment = document
.createRange()
.createContextualFragment(html);
this.element.appendChild(fragment);
// OR document.getElementById("testy_element").appendChild(fragment)
});
}
What this does is fetch an HTML response from the Rails server and insert it inside of the main controller's element (this.element). For example:
<div class="container" data-controller="test">
<button data-action="test#show">Do the Thing</button>
<!-- partial would appear here -->
</div>
What you are looking for is Stimulus’s sibling library Turbo, made to handle HTML navigation through turbo-frames and partially updating the page through turbo-streams.
For our application , we have initial load with data. We use those data to generate dynamic id and classes.
There are another api call we make to reload missing data. now the problem is if reload function bring different information, elementId complains that changing id is not allowed
like this(without api call)
https://ember-twiddle.com/394755fd5b355dd93cd147d4610fbf5e?openFiles=controllers.application.js%2Ctemplates.components.my-component.hbs
now , is there a good work around for this issue keeping this logic?
You're looking for a workaround. so have you considered to not use embers own div?
if you specify tagName: '' on your component, the component itself wont produce a div.
Next you can do <div id={{myId}}>...</div>, which will update correctly.
I'm using react-native and for a component I need to replace the default image of the SliderIOS component with a custom one. Is there any way of accomplishing this or should I create a custom slider component? (I don't have any experience in this.)
I have already tried embedding an image as a child of the slider as well as the vice-versa approach, however non of them have worked.
Looking at the source code for RCTSliderManager, we can see that it only exposes value, maximumValue, minimumValue, minimumTrackTintColor and maximumTrackTintColor. That means like it looks like you're out of luck. You could use the RCTSlider and RCTSliderManager files as a starting point for a custom component, or you could create a pull request to expose setThumbImage on UISlider.
I have created a pull request fixing this issue which hopefully gets accepted.
What I want is each of tab consist of its dynamic content, but now I doubt I was doing it correctly when I put ng-view within ng-repeat.
Here is a working version to push http://plnkr.co/edit/19sAXoEW4HZ9G7CT7R3a?p=preview . So in the beginning it was fine for me.
But after that I felt I've to load some data, the tab no longer working working when I do $scope.tasks = tasks
which tasks is a object in data.js. Here is the error : http://plnkr.co/edit/jbxypSlvk3rYlFAIHygo?p=preview
You are missing quotes on active=tab.active change to active="tab.active".
Which causes the
Error: The string contains invalid characters.
Why are you shoe-horning tabs here. I think a simple nav would do. The underlying issue is your design is fundamentally flawed, you can only have one ng-view on a page. If you update your post I can recommend a solution.
From the UI-router Doc, it says that for each state, you can set up multiple view and provide a different template and controller for each. So for my example, say I have a state provided that looks like this
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent':{templateUrl:"home.html"},
'menulist' :{templateUrl: "list.html" }
}})
So for the views, how would I be able to split off from there and set up a separate nested state for each one. This way my menulist can have multiple views, and my menuContent can as well, but both independent of each other.
I have a codepen set up with a basic boilerplate that has the content and menu views created, I'm just stuck on this next part. Any ideas? Any help is appreciated.
Sorry, this may not be an answer but I am new in this forum with low reputation that I cannot comment yet.
Think about if you really need states to do this. Maybe you are better off with using directives to split your menuContent and menuList. Using states to divide sections of a page is a bit confusing and cluttered. If you use directives, you can still have your own controllers embedded in the html via ng-controller="".