Meteor Helper not working with if statement - if-statement

I'll try to clarify this as much as possible because I believe the answer is going to be something very simple I'm overlooking.
My HTML:
<ul class="nav nav-tabs">
<li class="profile-info active">Personal Info</li>
<li class="profile-groups">Groups</li>
<li class="profile-commitments">Commitments</li>
</ul>
My Helper:
Template.Profile.helpers({
'personal':function(){
if ($('.profile-info').hasClass('active')) {
return true;
} else {
return false;
}
}
});
I just want 'personal' to return TRUE. However it always returns false no matter what type of "IF" statement I give it.

Related

Bootstrap how to style nav lists

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???

I can't loop an Object-Array with ember #each

<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

how to render only one template instance in meteor

Hi I have the following template :
<template name="users">
<ul id="item-list">
{{#each trackedUser}}
<li id="{{_id}}">
<span class="name">{{mUsername}}</span>
<p><span class="description">{{mDescription}}</span></p>
</li>
{{/each}}
</ul>
</template>
With this helper :
Template.users.helpers({
trackedUser: function() {
var curs = TrackedUser.find();
users = curs.fetch();
return users;
}
});
The problem is that in this case for each new user, all the users are being reput in the dom.
Is there a better way to write this code so that for each new user only the
<li id="{{_id}}">
<span class="name">{{mUsername}}</span>
<p><span class="description">{{mDescription}}</span></p>
</li>
is redrawn ?
Thank you
Avoid using fetch. When you use fetch() you don't pass along a cursor to handlebars so it can't re-render only the portion which has changed.
Template.users.helpers({
trackedUser: function() {
var curs = TrackedUser.find();
return curs;
}
});
For the case of anywhere else on your template (not in a loop) you could also use Reactivity Isolation which is wrapping your content in {{#isolate}}..{{/isolate} blocks.

EmberJS - How to call view method from inside a nested {{#each}}

I need to trigger the {{showAlias}} view method from within the {{#each content.activitytypes}} I have tried {{_parentView.showAlias}}. I believe I need to call it on the parent's parent, is that correct and how? I can call the {{showAlias}} outside of the {{#each...
Handlebars Template
<script type="text/x-handlebars">
<h2>Activities</h2>
<ul>
{{#each Km.activityController}}
{{#view Km.ActivityView contentBinding="this"}}
<li>
{{content.id}}:{{content.name}}
<ul>
{{#each content.activitytypes}}
<li>{{showAlias}}
{{name}} {{aliasname}}
</li>
{{/each}}
</ul>
</li>
{{/view}}
{{/each}}
</ul>
</script>
View
Km.ActivityView = Em.View.extend({
showAlias: function () {
var arr = this.getPath('content.activitytypes'),
show = false;
console.log(arr)
arr.forEach(function(item) {
var aliasArr = item.showaliasaccountid;
if (typeof aliasArr !== 'undefined') {
if (jQuery.inArray(2,aliasArr)) {
console.log(aliasArr);
show = true;
}
}
});
}.property('content.#each.activitytype.#each'),
});
{{parentView.showAlias}} will work, but in these situations with nested views and sub eachs I always find the code to be more maintainable with CollectionViews. Otherwise you end up stuffing too much inside of a single template/view.
http://docs.emberjs.com/#doc=Ember.CollectionView&src=false

How to set multiple values for the same attribute in tal:attributes using TALES

I'm trying to set multiple css classes on one element.
Unfortunately this doesn't work, as it returns: LanguageError: Duplicate attribute name in attributes.
<ul>
<li tal:repeat="item mainnav"
tal:attributes="class 'first' if repeat.item.start else nothing;
class 'last' if repeat.item.end else nothing;
class 'active' if item.active else nothing">
<a tal:attributes="href item.href" tal:content="item.title">title</a>
</li>
</ul>
Combining those 3 cases into one expression makes it quite complicated, because there are 6 different css states:
first + active
first
last + active
last
active
(none)
There are 2 possible solutions that I can think of:
-> check each combination inline:
<ul>
<li tal:repeat="item mainnav"
tal:attributes="
class 'first active' if (repeat.item.start and item.active) else
'first' if repeat.item.start else
'last active' if (repeat.item.end and item.active) else
'last' if repeat.item.end else
'active' if item.active else nothing">
<a tal:attributes="href item.href" tal:content="item.title">title</a>
</li>
</ul>
-> create a method that returns the combined css classes
Now, is there a better approach and if not, which of those 2 is better (probably the latter one, as if it gets more complicating the inline script will become unreadable/unmanageable).
BTW, are there any good resources and examples about Chameleon, TALES (other than http://chameleon.repoze.org/docs/latest)
You can use tal:define multiple times to define the various parts of your class string, then construct the actual attribute from those parts:
<tal:loop repeat="item mainnav">
<li tal:define="class_first 'first' if repeat.item.start else '';
class_last 'last' if repeat.item.end else '';
class_active 'active' if item.active else '';"
tal:attributes="class string:$class_first $class_last $class_active">
<a tal:attributes="href item.href" tal:content="item.title">title</a>
</li>
</tal>
This could result in an empty class attribute, which is harmless.
As for additional documentation; Chameleon is an implementation of TAL, originally developed for Zope Page Templates. As such, you'll find a lot of documentation for the latter also applies to Chameleon, as long as you take into account that Chameleon's default TALES modus is python:, while ZPT defaults to path: instead. The Advanced Page Templates chapter of the Zope Book applies to Chameleon as well, for example.
In Chameleon you can do:
<ul>
<li tal:repeat="item mainnav"
class="${'first' if repeat.item.start else ''}
${'last' if repeat.item.end else ''}
${'active' if item.active else ''">
<a tal:attributes="href item.href" tal:content="item.title">title</a>
</li>
</ul>
[Edit]
Or better like this:
<ul>
<li tal:repeat="item mainnav"
class="${('first ' if repeat.item.start else '') +
('last ' if repeat.item.end else '') +
('active' if item.active else '')}">
<a tal:attributes="href item.href" tal:content="item.title">title</a>
</li>
</ul>
You're not using tal:condition, it has a purpose. I don't like overly nested conditionals, gets you no where.
Haven't tested this but you may get the idea.
<ul>
<tal:myloop tal:repeat="item mainnav">
<li tal:condition="item.active" tal:attributes="class
'active first' if repeat.item.start
else 'active last' if repeat.item.end
else 'active'">
<a tal:attribute="href item.href" tal:content="item.title"></a>
</li>
<li tal:condition="not item.active" tal:attributes="class
'first' if repeat.item.start
else 'last' if repeat.item.end else None">
<a tal:attribute="href item.href" tal:content="item.title"></a>
</li>
</tal:myloop>
</ul>