I have a working version of bootstrap modals who open the nested list ('options') of a json who looks like that :
{
product: [{
id: 1,
title: 'Some dope shoes',
options: [
{ id: 1, name: 'Color' },
{ id: 2, name: 'Size' }
]
},
{
id: 2,
title: 'Some dope',
options: [
{ id: 3, name: 'Lenght' },
{ id: 4, name: 'Flavor' }
]
}
]
}
I've wrote everything for modals with templates I did used any file component. The trick is to make uniq modal id. Url looks like :
<a href="#" data-toggle="modal" data-target="#ma-modal{{optionid}}" title={{title}}>{{mmmh}}</a>
And modals looks like :
<div class="modal" id="ma-modal{{optionid}}"></div>
I don't feel confident about this code and because I'm learning ember I would like to know if doing all of this in template without any file components is something bad ?
Playing with the ids appears to me as a hack.
In my opinition, creating a component for modal is a way better solution, because:
Ember will generate ids and you will have an access to rendered element inside lifecycle hooks, so in many cases there is no need to know an id.
You will likely need to call some js-function to show a modal. Component gives a possibility to do this in the right moment (after rendering all elements) by using lifecycle hooks
It is easy to re-use a component if needed.
You may found all necessary info about components in documentation. Additionally, you can read about new (introduced in 1.13) lyfecycle hooks in this blog post.
And of course, you can use one of a many ember-cli addons, if you will find an appropriate one
Related
I'm using vue datatable, functionalities are working except callmethod() is not called on button click. When i click button no events are fired. Any Suggestions Please.
export default{
data(){
return{
columns: [
{label: 'name', field: 'name'},
{label: 'Link', representedAs: row => ` <button #click="callmethod(${row.id})"> </button>`, interpolate: true},
],
rows: [],
page: 1,
per_page: 10,
filter: '',
}
},
methods:{
callmethod()
{
console.log('function called');
},
EDIT: it looks like you're using vuejs-datatable actually. Still, there is only a presence of raw data and nothing like a callback there, so it should probably not be possible to do it there. Try to rather do it directly into your template somehow since nothing in the official documentation is talking about this.
Or maybe look another library that will allow you to do that. There are plenty and what you're trying to do may be easier with another package. The one you're currently using (vuejs-datatable) do only have 147 stars, so not the most popular. I'd recommend checking all the solutions available here: https://github.com/vuejs/awesome-vue#table
You can see the attached listeners like this, select the component from your vue devtools then check it's listeners in the console.
You're talking about Vuetify's v-data-table or another one? Because there is a lot of them around..
Also, from the official #data docs, we can see that it says
A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.
You should not handle any kind of #click events into data so far. Are you sure your library is intended to work this way ?
Essentially I'm receiving JSON from the server and would like to add properties to the objects I'm looping or the x-data of the component, is this possible with alpine.js?
The data is something that will be requested on an interval and looks something like:
let teams = [
{ id: 1, name: 'Person 1'},
{ id: 2, name: 'Person 2'},
...
];
What I'd like to do is add a new property favourite to the looped team object, with default set to false or add it as component data. I plan to use this property to filter the list later on. At the moment I have:
<template x-for="team in teams" :key="team.id">
<tr>
<td x-text="team.name"></td>
<td>
<input type="checkbox" x-model="favourite">
</td>
</tr>
</template>
I have tried a few things to get this working, such as using:
x-data="{ team: team, favourite: false }"
On both the tr and template tag as well as without passing the team object to the x-data directive. It seems like there is a clash between the x-for and x-data directives as this throws an error: Uncaught ReferenceError: team is not defined
I have also tried using x-init alongside the x-data directive to no avail.
At this stage I'm wondering if I'll have to switch to another JS library to get this working (recommendations welcome if necessary) or if my approach is fundamentally wrong.
Any help/pointers would be much appreciated.
In principle what you should be doing is adding the "favourite" field before it gets to the x-for.
For example if you're loading teams using fetch you could do:
<div
x-data="{ teams: [] }"
x-init="setInterval(() => {
fetch('/teams-url').then(res => res.json()).then(teamsData => {
teams = teamsData.map(team => ({ favourite: false, ...team }));
});
}, 1000);"
>
I also noticed that your example is using v-model and v-text, which should be x-model and x-text respectively.
I am using react-select to render the dropdown. The options to render the dropdown looks like this
[
{
text:'Fruit',
value:'mango'
level: 0
},
{
text:'Seasonal',
slug: 'saasonal',
level: 1
},
{
text:'Orange',
slug: 'orange',
level: 2
},
{
text:'Mango',
slug: 'mango',
level: 2
},
{
text: 'Winter',
slug:'winter',
level:1
},
{
text: 'Plum',
slug:'plum',
level:2
}
]
I would like the dropdown to be like
Fruit
Seasonal
Orange
Mango
Winter
Plum
I have tried adding a group to the react-select, but then the group heading is not clickable.
I have also referred to the stackoverflow link
[https://stackoverflow.com/questions/53119912/how-can-i-create-nested-option-groups-in-react-select-v2][1]
and tried creating a recursive dropdown in the same manner it is posted on the link above by passing my options as the data but was not successful.
The order of the within nested dropdown is based on the level.
react-select actually just got this feature builtin in July.
Here's the pull request where they implemented it.
Here's a working example from the pull request page.
I'm not sure if it has made its way into the master branch yet or not but you can always pull from the version listed in the package.json file in the sample above if the sample code doesn't work with the version you're using.
EDIT: Scratch that, you want group headings to be clickable. I don't think that was part of this commit.
In my Ember app, I have a complex model that looks like below (kind of contains 2-dimensional array)
[
[
{
id: 'Section1_123',
label: 'abc'
},
{
id: 'Section1_456',
label: 'xyz'
}
]
],
[
[
{
id: 'Section2_123',
label: 'abc'
},
{
id: 'Section2_456',
label: 'xyz'
}
]
]
There are a lot of other attributes, but this is the overall structure.
Now my question is can I drill-down & find a specific object. It has unique ids (as shown in the example above)
So I need something like model.findBy(Id)
I then need to change/set some values for that object. Say I want to change the obj.label from 'abc' to 'abc_NEW'
Just to add, The main model is actually a simple JS array...but the inside objects (e.g. those with id: 'Section1_123', etc) are actually Ember objects
Most common approach to work with data in Ember is EmberData. And because the main credo of Ember is "convention over configuration" then a common way in Ember is the best way, in my opinion.
There are many ways how to deal with your data format. I would recommend to create model for each item:
import DS from 'ember-data';
export default DS.Model.extend({
label: DS.attr()
// other properties
});
Then you can make a custom serializer according this article. The goal is to convert your arrays to list of EmberData models.
After this you can use standard EmberData functions to work with data (including access by object id, of course).
I started using the LumX framework recently, and I was trying to use their Selects directive here, but I'm not clear on their documentation. This is what I've got so far:
<lx-select ng-model="selectedPriority" placeholder="Priority" choices="priorities">
<lx-select-selected>
{{ $selected.name }}
</lx-select-selected>
<lx-select-choices>
{{ $choice.name }}
</lx-select-choices>
</lx-select>
And this is how I'm defining priorities (within the controller for the div containing the lx-select)
$scope.priorities = [
{ name: 'Urgent', id: 1 },
{ name: 'Very important', id: 2 },
{ name: 'Not important', id: 3 },
{ name: 'None', id: 4 }
];
Which does give me a list to select from, but the selectedPriority model never gets updated, so that whenever I try to use that value, it's always undefined. I can't even run the example they provide in the documentation page, but I'm not sure what I'm missing.
So initializing the selectedPriority variable this way:
$scope.selects = {
selectedPriority: undefined,
};
seemed to do the trick. I tried without declaring selectedPriority inside an array but as far as I could tell, this is the only way the model gets properly updated.
Check your angular version and see if it matches your lumX version's minimum requirements.
For example a match of version 0.3.24 of lumX and version 1.2.28 of angular would produce exactly the issue you have encountered (model wouldn't update), as far as I have experimented.