Is it possible to have an if / else statement which does not render any html in a view similar to knockout:
<!-- ko if: someExpressionGoesHere -->
but it needs to be on an element
Yes, but if v-if conditional is false, it's not added to DOM tree.
HTML
<div id="main"></div>
JavaScript
new Vue({
el: "#main",
template: '<div v-if="name"><span v-text="name"></span></div>',
data: {
// name: "bob"
}
});
console.log(document.body.innerHTML);
// <div id="main"><!--vue-if--></div>
Still not good for you?
I know the question was already answered, but thought I would pass along something I use, now that I am writing sites with Vue (which I love.) I am a fan of Knockout and have many sites written in it using the:
<!-- ko if: someExpressionGoesHere -->
You could do a similar thing in Vue like this:
<template v-if="someExpressionGoesHere">
<p>Expression is True</p>
</template>
<template v-else>
<p>Expression is False</p>
</template>
The templates will not render anything to the page. The resulting html will be a single p of the 'Expression is xxx'.
I think it is a bit more clear of what the intent of the code is here than the actual answer to this post IMHO.
you can also use this way to write if else condition in vue.js
<template>
<div id="app">
<p v-if="someConditionHere">Condition True</p>
<p v-else>Condition False</p>
</div>
</template>
Related
I try to get working the electron-vue boilerplate. After setting up the project everything works, but as I create a new .vue file (TopMenu.vue) I get:
vue.common.js?4eb4:2569 [Vue warn]: Unknown custom element: <topmenu> -
did you register the component correctly? For recursive components, make
sure to provide the "name" option. (found in component <landing-page>)
I use the exact syntax as the original .vue files which came with the boilerplate:
LandingPageVue.vue:
<style scoped>
img {
margin-top: -25px;
width: 450px;
}
</style>
<template>
<div>
<!-- <img src="./LandingPageView/assets/logo.png" alt="electron-vue"> -->
<h1>Welcome.</h1>
<topmenu></topmenu>
<current-page></current-page>
<versions></versions>
<links></links>
<div class="container">
</div>
</template>
<script>
import TopMenu from './LandingPageView/TopMenu'
import CurrentPage from './LandingPageView/CurrentPage'
import Links from './LandingPageView/Links'
import Versions from './LandingPageView/Versions'
export default {
components: {
TopMenu,
CurrentPage,
Links,
Versions
},
name: 'landing-page'
}
</script>
TopMenu.vue (my file):
<template>
<p>
TOPMENU
</p>
</template>
By the way, how the hack does <current-page></current-page> work (notice the "-" dash) if bellow it is declared without?
It's not working because you're not exporting anything in your vue file.
Try this in your TopMenu.vue file:
<template>
<p>
TOPMENU
</p>
</template>
<script>
export default {
}
</script>
Also change the html <topmenu></topmenu> to <top-menu></top-menu>
For your second question, HTML is case insensitive so your title case components wouldn't match with html tags. So Vue translates your title case components to a 'dash-case'.
From the documentation itself there's the explanation why:
Note that Vue does not enforce the W3C rules for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.
You can read more from the the docs
Good Afternoon,
I am trying to crate a page, where i keep the navigation and the footer template always on, and in the main yield, i load the data refering to the page i am accessing.
my problem is, in the routes.js file i used the following
Router.configure({
layoutTemplate:'mainLayout',
//notFoundTemplate:"notFoundTemplate",
//loadingTemplate:"loadingTemplate",
});
Router.route('/', function () {
this.render('navigation', {to: 'navigation'});
this.render('footer', {to: 'footer'});
this.render('carousel');
this.render('oper_areas');
this.render('partners');
});
and my mainLayout template goes like this
<template name="mainLayout">
<header>
{{> yield 'navigation'}}
</header>
{{> yield }}
<footer class="full-width">
{{> yield 'footer'}}
</footer>
</template>
so i am sending the navigation template to the navigation yield, the footer to the footer yield and this is working fine, and then i am trying to fill the {{> yield }} with the content of 'carousel', 'oper_areas' and 'partners', this will assemble all the information i need to create my main page, but only the last one is showing.
is there anyway i can put the 3 templates inside the same {{> yield }} at the same time?
thanks for the help in advance.
In my meteor project, I have added iron:layout, iron:dynamic-template along with iron:router.
My question is, how can you prevent the dynamic template from rendering if there is no data available in the Session? The reason is, the dynamic template is currently being rendered with all html content within it except for data context. This is the problem when the user initially arrives onto the page.
I have a list of names on 'postlist' template. These are 'usernames' of the person who created the post. When a user clicks on the name, the template 'viewpost' is rendered with the relevant data passed...that is fine. But as stated earlier, there is no data context when the user first arrives onto the page. So the see all the content except for the dynamic content.
The following is my current code, with help received from my previous post. Meteor: Render template inside a template
HTML:
<template name="postlist">
<div class="container">
<div class="col-sm-3">
{{#each post}}
<li>{{fullname}}</li>
{{/each}}
</div>
</div>
{{> Template.dynamic template='viewpost' data=currentPost}}
</template>
Click event to capture post _id / helper file:
Template.postlist.helpers({
currentPost: function(){
return Posts.findOne(Session.get('currentPost'));
}
});
Template.postlist.events({
'click li': function(e){
e.preventDefault();
Session.set("currentPost", this._id);
}
});
This is one alternative hack method but understand is not good practice. This is what I am effectively wanting to achieve so you get an idea. But I would like non-hack suggestions for this issue. Thank you.
html:
<template name="viewpost">
{{#if hasData}}
<div class="container">
Post creator is : {{username}} - Info: {{body_text}}
</div>
{{/if}}
</template>
js:
Template.viewpost.helpers({
"hasData":function(){
return Session.get("currentPost");
}
});
I see that ember has a very nice mechanism for wrapping content in a component using the {{yield}} mechanism documented here.
So, to use the example in the documentation, I can have a blog-post component template defined like so:
<script type="text/x-handlebars" id="components/blog-post">
<h1>{{title}}</h1>
<div class="body">{{yield}}</div>
</script>
I can then embed blog-post into any other template using the form:
{{#blog-post title=title}}
<p class="author">by {{author}}</p>
{{body}}
{{/blog-post}}
My question is, can I specify two different {{yield}} outlets in the components template?
Something like this is possible via Named Outlets in Ember.Route#renderTemplate like so:
Handlebars:
<div class="toolbar">{{outlet toolbar}}</div>
<div class="sidebar">{{outlet sidebar}}</div>
JavaScript:
App.PostsRoute = Ember.Route.extend({
renderTemplate: function() {
this.render({ outlet: 'sidebar' });
}
});
I'm not sure I can take this path for a component which will not know what route's template would be rendering it.
EDIT 1:
For the sake of clarity, I'm trying to implement the Android Swipe for Action Pattern as an Ember component.
So, I'd like users of this component to be able to specify two different templates:
A template for the normal list item, and
A template for the actions that are revealed when a swipe on (1) is detected.
I want to make this into a component, because quite a lot of javascript goes into handling the touch(start/move/end) events, while still managing smooth touch based scrolling of the list. Users would supply the two templates and this component would manage handling of touch events and necessary animations.
I've managed to get the component working in the block form, where the block's contents are treated like (1). The second template (2) is specified through a parameter (actionPartial below) which is the name of a partial template for the actions:
Component Handlebars Template: sfa-item.handlebars
<div {{bind-attr class=":sfa-item-actions shouldRevealActions:show" }}>
{{partial actionPartial}}
</div>
<div {{bind-attr class=":sfa-item-details isDragging:dragging shouldRevealActions:moveout"}}>
{{yield}}
</div>
Calling Handlebars Template:
{{#each response in controller}}
<div class="list-group-item sf-mr-item">
{{#sfa-item actionPartial="mr-item-action"}}
<h5>{{response.name}}</h5>
{{/sfa-item}}
</div>
{{/each}}
Where the mr-item-action handlebars is defined like so:
mr-item-action.handlebars:
<div class="sf-mr-item-action">
<button class="btn btn-lg btn-primary" {{action 'sfaClickedAction'}}>Edit</button>
<button class="btn btn-lg btn-primary">Delete</button>
</div>
Problem is, actions from the user supplied partial, sfaClickedAction above, are not bubbled up from the component. A fact which is mentioned in the docs in para 4.
So, now I do not know how a user could capture actions that he defined in the supplied actions template. A component cannot catch those actions because it doesn't know about them either.
EDIT 2
I sprung a follow up question here
This blog post describes the most elegant solution for Ember 1.10+: https://coderwall.com/p/qkk2zq/components-with-structured-markup-in-ember-js-v1-10
In your component you pass yield names into {{yield}}s:
<header>
{{yield "header"}}
</header>
<div class="body">
{{yield "body"}}
</div>
<footer>
{{yield "footer"}}
</footer>
When you invoke your component, you accept the yield name as a block param... and use an esleif chain!
{{#my-comp as |section|}}
{{#if (eq section "header")}}
My header
{{else if (eq section "body")}}
My body
{{else if (eq section "footer")}}
My footer
{{/if}}
{{/my-comp}}
PS eq is a subexpression helper from the must-have ember-truth-helpers addon.
PPS Relevant RFC: proposal, discussion.
Since it is not possible to have two {{yield}} helpers within one component (how would the component know where one {{yield}}'s markup stops and the next one begins?) you may be able to approach this problem from a different direction.
Consider the pattern of nested components. Browsers do this already with great success. Take, for example, the <ul> and <li> components. A <ul> wants to take many bits of markup and render each one like a member of a list. In order to accomplish this, it forces you to separate your itemized markup into <li> tags. There are many other examples of this. <table>, <tbody>, <tr>, <td> is another good case.
I think you may have stumbled upon a case where you can implement this pattern. For example:
{{#sfa-item}}
{{#first-thing}}
... some markup
{{/first-thing}}
{{#second-thing}}
... some other markup
{{/second-thing}}
{{/sfa-item}}
Obviously first-thing and second-thing are terrible names for your specialized components that represent the things you'd want to wrap with your first and second templates. You get the idea.
Do be careful since the nested components won't have access to properties within the outer component. You'll have to bind values with both outer and inner components if they are needed in both.
I am using Twitter Bootstrap's modals throughout a web application. I am also using Mustache templates to generate the information to display inside the modals. The problem is that I find myself creating new modals for nearly every single form that is rendered to the screen and I feel that this violates DRY. I am considering creating a global modal object that is defined in the 'window' object and can be accessed throughout my application. When I want to display a new form I just render the form into the global modal object and then show it. Can anyone give me some advice on how to better handle numerous forms with modals?
I think you have the right idea. If you have a lot of modals, creating new ones can get repetitive. I've done something similar to what you proposed: create a single modal object that can be reused for a variety of modals.
In the past I used jQuery dialog, but the principle is entirely the same. Create a JavaScript module with some boilerplate HTML, that you can use to display any number of forms (essentially HTML content).
I'll try to propose a very basic implementation without knowing too much about your application.
HTML based from the Bootstrap example here:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="dynamicHeader">
<!-- Our header will go here -->
</h3>
</div>
<div class="modal-body" id="dynamicBody">
<!-- Our body will go here -->
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Notice the unique id's I've added to the h3 and the div.modal-body. We'll use those in JavaScript to dynamically inject each form's title and content.
JavaScript:
var ModalManager = (function() {
// cache some DOM references
var $dynamicHeader = $('#dynamicHeader');
var $dynamicBody = $('#dynamicBody');
var $myModal = $('#myModal');
var launch = function(header, body) {
$dynamicHeader.html(header);
$dynamicBody.html(body);
$myModal.modal(/* options here */);
};
return {
launch: launch
/* expose more API methods here! */
};
}());
Here is an example usage!
HTML w/ JavaScript:
<div id="form1">
<div class="formHeader">
Form One
</div>
<div class="formBody">
<p>Html and stuff</p>
</div>
</div>
<script type="text/javascript">
// Using a closure to protect globals
// This would probably go in your click handler to launch a given modal
(function() {
var headerHtml = $('form1 .formHeader').html();
var bodyHtml = $('form1 .formBody').html();
ModalManager.launch(headerHtml, bodyHtml );
}());
</script>
Finally, I wrapped all of that up in a jsFiddle which demonstrates the ability to launch two different forms.
Link: jsFiddle
I used jQuery as it should be included with the Bootstrap code for the modal. It will pull out the header and body HTML that are specific to each form, and populate your common modal HTML in the DOM. Then when you launch the modal it will display what looks like a different modal, but you've centralized the common aspects so you're not repeating them anymore!
There's a lot more you can do but that's basically the gist. My own implementation exposed means to configure the buttons dynamically, for example. Depending on what you want configurable, you can add an options parameter that passes on to the modal() function, or has other properties specific to your application that ModalManager can handle. You can definitely use templating to carry out some of these features, it's just not essential to the example I've setup.
I hope that helps!
I'm not quite sure what you are asking. Mustache does have looping functionality, so you could pass in an array of modals, and Mustache should generate all of the code.
I actually just created a video showing how to build a Mustache template for Twitter Bootstrap's Alert component, and implement it via PHP and JavaScript. It also features the looping functionality I spoke of. Maybe that will help? Here is the link: http://mikemclin.net/mustache-templates-for-php-and-javascript/