I'm trying to make the content of each li element visible as a single tooltip. But for some reason, I can't clear the tooltip when I move from one li element to another. So as a result, the content of all elements appears in all tooltips.
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
</ul>
const content = $('li').text();
$('li').hover(
function() {
$(this).append($('<div>' + content + '</div>'));
},
function() {
$(this).find('div').last().remove();
});
Tried .remove() but that doesn't work. What am I doing wrong here?
Related
I am beginner in Vue.js. I want to add new items in list, but these items need to be displayed in separate divs according to their "category" property. Also, every item has option to be edited (haven't made that yet) or deleted. I have read that it is not recommended to use v-if inside v-for, so inspired by second answer here I used Computed Properties to do that. I needed to add index for every list item, because I haven't found any way to delete list item in Vue.js without index. The problem is that we iterate over two lists from computed properties and basically we have repeating indexes (check out print of list items in my code and you will understand) so it deletes items from wrong category. This problem would make editing item names harder, too. I was thinking of way to solve this, but I would have to use v-for and v-if together which is not recommended.
Also, this is not very good solution for me, because I would probably need to generate these divs dynamically from given list of categories (there could be a lot of them), and I don't know how would I be able to generate computed properties dynamically for each category. For this I would need to use v-if inside v-for, which is not recommended.
So basically I have two problems:
1. Deleting items from wrong category
2. Dynamically generating divs for each category if I keep using this method with computed properties.
Here is my code: fiddle
Do you have any advice or solutions? Thanks in advance!
The index in the v-for has nothing to do with that of the object in the amenities array.
Since you don't want to make one loop for both categories, I can this solution:
A better approach would be to autogenerate a unique id for each object on addition, and then deleting according to it:
new Vue({
el: '#app',
data: function() {
return {
Amenity: {
name: '',
category: ''
},
amenities: [],
nextId:0
}
},
computed: {
familyCategory: function () {
return this.amenities.filter(i => i.category === 'family')
},
facilitiesCategory: function () {
return this.amenities.filter(i => i.category === 'facilities')
}
},
methods: {
addAmenity: function(e) {
this.amenities.push({
id: this.nextId,
name: this.Amenity.name,
category: this.Amenity.category
});
this.Amenity = {
name: '',
category: 'family'
};
this.nextId = this.nextId+1;
},
removeElement : function (id) {
console.log(id);
this.amenities=this.amenities.filter(e => e.id!=id);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<br /> Amenity name:
<input type="text" v-model="Amenity.name" placeholder="Amenity name">
<label for="category">Category:</label>
<select id="cetegory" v-model="Amenity.category">
<option value="family">Family</option>
<option value="facilities" >Facilities</option>
</select>
<input type="button" #click="addAmenity" value="Submit" class="btn btn-info">
<div>
<h3>Family</h3>
<ol>
<li v-for="(item, index) in familyCategory">
{{ index }} - {{ item.name }}
<button>
Edit
</button>
<button v-on:click="removeElement(item.id)">
Delete
</button>
</li>
</ol>
</div>
<div>
<h3>Facilities</h3>
<ol>
<li v-for="(item, index) in facilitiesCategory">
{{ index }} - {{ item.name }}
<button>
Edit
</button>
<button v-on:click="removeElement(item.id)">
Delete
</button>
</li>
</ol>
</div>
</div>
I'm using a bootstram menu as with two level list with drop down. Exemple of code:
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Item0<span> class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</li>
<li>
<ul class="nav navbar-nav">
<li>Item13</li>
<ul class="dropdown-menu">
<li>Item131</li>
<li>Item132</li>
<li>Item133</li>
<li>Item134</li>
<li>Item135</li>
</ul>
<li>Item23</li>
<li>Item33</li>
</ul>
</li>
Css is bootstrap where i would like to make some modyfications of colours. However, when I make a change in:
.navbar-default .nav li a{
...
}
it changes all list elements colours. Is it possible to style nested lists in in different colour while level up list has a different one?
e.g. "Item0, Item13 Item23 Item33" in red, "Item1 .. Item5" in blue and so on...
you can style a specific group of elements by adding a class:
<li class="yourclass">Item1</li>
and then use CSS to style all the elements has the same class:
.yourclass { color: red }
I hope this helps
Sure: add a class to elements you want to color differently and style background there. Example
<ul class="dropdown-menu">
<li><a href="#Item1" class='red'>Item131</a></li>
<li><a href="#Item2" class='red'>Item132</a></li>
<li><a href="#Item3" class='blue'>Item133</a></li>
<li>Item134</li>
<li>Item135</li>
</ul>
And css
.red {
...
}
.blue {
...
}
I hope this helps
You can give additional class to the specific list items to overwrite the default design in booststrap.
for example :
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
then in a new css file overwrite the default custom design.
.custom{
.....
}
I have been trying acc to waht you sugest but adding a class and styling dosn't work.
e.g.
.red {
color:red;
}
but
.red {
color:red !important;
}
start to works - can you explain me why???
<div class="nav-menu clearfix">
<ul class="list-unstyled list-inline">
{{#each MI in MB}}
<li id=""><span>{{ MI.MText }}</span></li>
{{else}}
{{MB}}
{{/each}}
</ul>
</div>
I want loop the MB with each.
but it dose not work and return the MB is empty.
but I get this for else.
[object Object],[object Object],[object Object],[object
Object],[object Object]
this is my route define
//application路由
App.ApplicationRoute = Ember.Route.extend(App.LazyLoadTemplate, {
model : function() {
return Ember.$.getJSON("/index/indexjson");
}
});
and get a json data is
{
'UIB':{...},
'MB':[{...},{...},...,{...}]
}
My English is not well ,Thanks for help!
As you already found, your scope of your property was incorrect. Just to set the record straight, Ember-Handlebars will not iterate over an object like it will over an Array. Additionally the else statement is totally legit, it will be triggered when the array being iterated across is empty (null/undefined/no elements)
{{#each item in model}}
{{item}}
{{else}}
No Items
{{/each}}
http://emberjs.jsbin.com/iWohUlE/1/edit
Edit as kingpin pointed out in his answer, this response is referencing the wrong version of handlebars.
Your misusing the block helper each in your template. Handlebars each will work similarly with objects and arrays. In addition you had an else outside of an if block. Rewrite your template as follows:
<div class="nav-menu clearfix">
<ul class="list-unstyled list-inline">
{{#each MB}}
<li id=""><span>{{ MText }}</span></li>
{{/each}}
</ul>
</div>
Fiddle example
I want to implement item-list/item-detail pattern in Ember, but the nuance is that the detail view must appear next to the selected item. E.g:
<ul>
<li><div>Post 1<div></li>
<li><div>Post 2<div></li>
<li><div>Post 3<div></li>
<li>
<div>Post 4<div>
<div>
<ul>
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
</ul>
</div>
</li>
<li><div>Post 5<div></li>
</ul>
The Handlebars template I tried is:
<script type='text/x-handlebars' data-template-name='posts'>
<ul>
{{#each model}}
{{#linkTo 'post' this}}
<div>{{title}}</div>
{{/linkTo}}
{{#if isSelected}} <!-- How to implement isSelected ? -->
<div>{{!-- render selected post's comments --}}</div>
{{/if}}
{{/each}}
</ul>
</script>
I tried this in controller:
App.PostController = Em.ObjectController.extend({
isSelected: function() {
return this.get('content.id') === /* what to put here? */;
}
});
What I'm stuck with is how to implement isSelected in 'Ember'-way? Am I going in right direction?
You are on the right track. The trick is to use a different controller to wrap products in the item-list vs. the item-detail. So start by specifying that the handlebars {{each}} helper should wrap each entry in a ListedProductController
{{#each model itemController="listedProduct"}}
Now define ListedProductController, adding the isSelected function you'd been writing. Now it can reference the singleton ProductController via the needs array, comparing the product that was set by the router to the listed product.
App.ProductController = Ember.ObjectController.extend({});
App.ListedProductController = Ember.ObjectController.extend({
needs: ['product'],
isSelected: function() {
return this.get('content.id') === this.get('controllers.product.id');
}.property('content.id', 'controllers.product.id')
});
I've posted a working example here: http://jsbin.com/odobat/2/edit
How can I set the id for elements created by the Ember.js handelbars helper #each?
If you take a look at http://jsfiddle.net/7QL5z/ I tried to define an id on calling the #each helper.
The resulting HTML looks like this:
<div id="ember191" class="ember-view">
<ul>
<li id="ember349" class="ember-view"> Animal - Animals </li>
<li id="ember389" class="ember-view"> Android - Androids </li>
<li id="ember427" class="ember-view"> Human - Humans </li>
</ul>
</div>
Neither the div nor the ul (that would be the most usable way) get the specified id.
Is it possible at all? If not: how can I access these elements via Ember?
I tried setting 'elementId' instead of 'id' on the '#each' but it didn't seem to work either...
Otherwise you can create an animals list view
App.AnimalsListView = Ember.CollectionView.extend({
tagName: 'ul',
contentBinding: 'App.itemsController.content',
classNames: ['animals'],
elementId: 'animalsList',
itemViewClass: Ember.View.extend({
classNames: ['animal'],
templateName: 'ember/templates/animals/animal',
elementId:Ember.computed(function(){
'animal-'+this.getPath('content.name')
})
})
});
In your animal template:
{{ content.get('name') }} - {{ content.get('pluralized') }}
And finally in your main html file
<script type="text/x-handlebars">
{{ view App.AnimalsListView }}
</script>
You can just specify the id on a view using id="whatever", but it won't work on a {{#each}}
http://jsfiddle.net/tomwhatmore/TJvR6/
Might be a slightly more elegant solution but what I've put in that js fiddle seems to work.