I'm trying to access data two times in my template, once on a list view, and once in a modal view. Upon clicking on the image, the modal will display a lot of the same data, just blown up. I'm having issues. The modal seems to be taking the last set of data, even though it's nested in the each statement. Any ideas? Here's my code...
<div class="row">
{{#each model.products as |product|}}
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="shopify-grid-wrapper">
<div id="#image-wrapper" class="image-wrapper" {{action 'openModal'}}>
<div class="img-overlay">
<p>
Click for More Details
</p>
</div>
{{#each product.images as |image|}}
<img src= {{image.src}} />
{{/each}}
</div>
<div class="description-wrapper">
<span><p>{{product.title}}</p></span>
<p>
{{product.productType}}
</p>
<p>
{{product.tags}}
</p>
</div>
</div>
</div>
{{#if shopifyModal}}
{{#liquid-wormhole class="fullscreen-modal" }}
<div class="left-side">
{{selectedProduct.title}}
</div>
<div class="right-side">
{{buy-button product=product.attrs open="openCart"}}
<div class="Cart {{if model.isCartOpen "Cart--open"}}">
{{shopify-cart close="closeCart"}}
</div>
<p {{action 'closeModal'}}>
Close
</p>
</div>
{{/liquid-wormhole}}
{{/if}}
{{/each}}
</div>
The problem was answered in the comments, but I'm adding this here in case someone finds it.
When looping over a collection in a template, if you have an action inside that loop, you must pass some information to the action handler if you expect the "current" item to be processed by the action handler, like this:
{{action 'openModal' product}}
Related
This is my problem:
What I'm trying to do is when I click on a model's name, I get a modal window that shows all it's attributes, like so:
However, when I click on another one, it doesn't work, no modals show up, like so:
This is my index.hbs:
<div class="row" style="text-align:center;">
{{#each model as |event|}}
<div class="col-xs-3 col-md-3">
<div class="centerBlock">
</div>
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#{{event.name}}">{{event.name}}</button>
</div>
<!-- Modal -->
<div class="modal fade" id="{{event.name}}" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{event.name}}</h4>
</div>
<div class="modal-body">
<p>{{event.location}}</p>
<p>{{event.roomNumber}}</p>
<p>{{event.eventDay}}</p>
<p>{{event.eventTime}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal-->
{{/each}}
</div>
And this is my index.js:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('event');
}
});
I suppose that I'm doing my {{#each}} wrong, but I've spent about an hour on it and I can't figure it out.
Sorry this is such a dumb problem, and thanks for any direction!
The problem is your event name. You have spaces in Yoga Drop-In and later you use that as modal id attribute. You can't target model by id with spaces. You have to use another property as modal target. For example you could take model name and remove all spaces from that, or replace with dashes. It will work after you do so.
I have two resources, both of which have a template, model, and controller. The parent resource also has a route. The resources are related to each other in an Ember Data hasMany relationship. I've built these in a very straight-forward manner using Ember-Cli
Since you reach the second resource through the first (it has a parent-child relationship), I would like the URL of the parent to look like:
/parent/:parent_id
And I'd like the URL of the child to look like:
/parent/:parent_id/child/:child_id
When I try to nest the routes (changing the route and changing the link-to helper), and when I display the child route, it renders the child's template right below the parent's template instead of replacing it. I'd like to modify the parent or replace it instead.
Here's a codepen mockup of what's currently outputting for me:
Child is not replacing parent
I'd like to figure out two things:
1) Is it possible to make the child resource maintain that URL, but replace the parent resource's view (and possibly still have access to both resources models)? How do I do this?
2) Is it possible to keep this relationship/view, but cause the parent template to reduce its view when it is viewed in the context of the child URL? Some details of the parent, but fewer. How do I do this?
Code
Output I have working now for parent/:parent_id/child/:child_id (not ideal output! same as codepen above):
<div class="row">
<h1>Parent name</h1>
<div class="columns">
<div class="panel">
<p>Parent details 1</p>
<p>Parent details 2</p>
</div>
</div>
</div>
<div class="row">
<div class="columns">
<h3>Child list here</h3>
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-4">
<li><div class="panel">Child 1</div></li>
<li><div class="panel">Child 2</div></li>
<li><div class="panel">Child 3</div></li>
<li><div class="panel">Child 4</div></li>
<li><div class="panel">Child 1</div></li>
<li><div class="panel">Child 2</div></li>
<li><div class="panel">Child 3</div></li>
<li><div class="panel">Child 4</div></li>
</ul>
</div>
</div>
<div class="row">
<h1>Child name</h1>
<div class="columns">
<div class="panel">
<p>Child details 1</p>
<p>Child details 2</p>
</div>
</div>
</div>
Output of parent/:parent_id/child/:child_id if question 1 is answered (much better, and my original intention, to only show the child details):
<div class="row">
<h1>Child name</h1>
<div class="columns">
<div class="panel">
<p>Child details 1</p>
<p>Child details 2</p>
</div>
</div>
</div>
Output of parent/:parent_id/child/:child_id if question 2 is answered (I decided while struggling with these nested outputs that this is the ideal output, since it shows the child, but still has a little context and better navigation):
<div class="row">
<div class="row">
<span><strong>From parent:</strong> Parent name</span>
</div>
<div class="row">
<div class="small-6 columns">
Previous child
</div>
<div class="small-6 columns">
Next child
</div>
</div>
</div>
<div class="row">
<h1>Child name</h1>
<div class="columns">
<div class="panel">
<p>Child details 1</p>
<p>Child details 2</p>
</div>
</div>
</div>
Today , I just start learning ember.js. I tried one sample application.
Search the result and it will show the list. Click on the link and it will show the result at right sidebar. It's working fine.
However, I want to show home template at first.
When I tried with {{outlet name}} , it can show the home template however it is not working when I click on link. So, is there any way to show default outlet ?
I found about default outlet at here . However, it need to remove my data-templte-name to show default outlet. I don't want to remove the data-template-name.
Current template is like following.
<script type="text/x-handlebars" data-template-name="dictionary">
<div id="left">
<header>
<div id="topheader">
<img src="images/logo.jpg" class="logo">
<i id="search-icon"> </i>
{{input type="text" id="query" placeholder="Search" value=query
action="query"}}
</div>
</header>
<div id="results">
{{#each results}}
{{#link-to "detail" this}}
<section>
<div class='detail'>
<div class='word'>{{Word}}</div>
<div class='state'>{{state}}</div>
<div class='def'>{{def}}</div>
</div>
</section>
{{/link-to}}
{{/each}}
</div>
<footer>
<div id="bottom">
<a href="#" class='btn'>Login</a>
<a href="#" class='btn add'>Add</a>
</div>
</footer>
</div>
<div id="right">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="detail">
<div id="details">
<div class='word'>{{Word}}</div>
<div class='state'>{{state}}</div>
<div class='def'>{{def}}</div>
</div>
<div id="discuss">
</div>
</script>
<script type="text/x-handlebars" id="home">
<div id="homeScreen">
Sample home screen
</div>
</script>
The root template to be rendered is the application template (associated with the root/application level). An empty id/data-template-name is assumed to be the application template. If you want to use a different template for the application root you can create the application view and specify the templateName.
App.ApplicationView = Ember.View.extend({
templateName: 'foo'
});
http://emberjs.jsbin.com/EZocURAR/1/edit
Why I can't thing a view like part of a module?.
In .NET you have the view and the code behind. Sometimes we need to do somehing that match with this logic like grid with a widget inside each cell. Usually a widget have a little nice box with a title and the content, with a little logic, how I can include a partial like that to another view like that.
#extends('jarvis.admin._layouts.default')
#section('title')
Dashboard
#stop
#section('main')
<div class="row-fluid">
<div class="span4">
#yield('first')
<div class="jarviswidget" id="widget-id-00">
<header>
<h2>{{ $widget['title'] }}</h2>
</header>
<div>
<div class="jarviswidget-editbox">
<div>
<label>{{ ucfirst(Lang::get('strings.title')) }}:</label>
<input type="text">
</div>
<div>
<label>{{ ucfirst(Lang::get('strings.style')) }}</label>
<span data-widget-setstyle="red" class="red-btn"></span>
<span data-widget-setstyle="green" class="green-btn"></span>
<span data-widget-setstyle="purple" class="purple-btn"></span>
<span data-widget-setstyle="black" class="black-btn"></span>
<span data-widget-setstyle="darkgrey" class="darkgrey-btn"></span>
</div>
</div>
<div class="jarviswidget-timestamp"></div>
<div class="inner-spacer">
<!-- content goes here -->
#yield('wg_content')
Content
</div>
</div>
</div>
</div>
<div class="span4">
#yield('second')
<div class="jarviswidget" id="widget-id-00">
<header>
<h2>{{ $widget['title'] }}</h2>
</header>
<div>
<div class="jarviswidget-editbox">
<div>
<label>{{ ucfirst(Lang::get('strings.title')) }}:</label>
<input type="text">
</div>
<div>
<label>{{ ucfirst(Lang::get('strings.style')) }}</label>
<span data-widget-setstyle="red" class="red-btn"></span>
<span data-widget-setstyle="green" class="green-btn"></span>
<span data-widget-setstyle="purple" class="purple-btn"></span>
<span data-widget-setstyle="black" class="black-btn"></span>
<span data-widget-setstyle="darkgrey" class="darkgrey-btn"></span>
</div>
</div>
<div class="jarviswidget-timestamp"></div>
<div class="inner-spacer">
<!-- content goes here -->
#yield('wg_content')
Content
</div>
</div>
</div>
</div>
<div class="span4">
#yield('third')
<div class="jarviswidget" id="widget-id-00">
<header>
<h2>{{ $widget['title'] }}</h2>
</header>
<div>
<div class="jarviswidget-editbox">
<div>
<label>{{ ucfirst(Lang::get('strings.title')) }}:</label>
<input type="text">
</div>
<div>
<label>{{ ucfirst(Lang::get('strings.style')) }}</label>
<span data-widget-setstyle="red" class="red-btn"></span>
<span data-widget-setstyle="green" class="green-btn"></span>
<span data-widget-setstyle="purple" class="purple-btn"></span>
<span data-widget-setstyle="black" class="black-btn"></span>
<span data-widget-setstyle="darkgrey" class="darkgrey-btn"></span>
</div>
</div>
<div class="jarviswidget-timestamp"></div>
<div class="inner-spacer">
<!-- content goes here -->
#yield('wg_content')
Content
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
</div>
</div>
#stop
Where each #yield will load a small widget processing the little logic or even another template with another nested views.
For example #yield('first') will load a box that is another template with a yield inside, and a variable as title. This nested yield will have another yield or the content... then the same box we use for the box will be used another time to render #yield('second') with another title and another content, that maybe use the same as the first yield.
I don't understand how to make this cascade with blade template system. Is there a way to do something similar?
I know is complicated but if you ever used .net, you could understand what I mean.
Thanks and sorry for my english.
Do that have similarities with the HMVC model, but is not the same.
I found the solution...
Is a little complicated to explain here but I'm going to do my best.
Try this:
default template (default.blade.php)
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="fluid-container">
#yield('main')
</div>
</body>
</html>
default content template (mypage.blade.php)
#extends('_layouts.default')
#section('main')
<div id="widget-grid">
<div class="row-fluid">
<article class="span12">
#include('_modules.mymodule')
</article>
</div>
</div>
#stop
module template (mymodule.blade.php)
We send some variables to the shared template widget
#extends('admin._partials.widget', array('widget' => array('title' => 'title', 'id' => 'some_id', 'style' => 'your: style')))
#section('wg_content')
<!-- Your widget content goes here -->
#overwrite
shared template (widget.blade.php)
Your title $widget['title']
Your id $widget['id']
Your style $widget['style']
<!-- content -->
#yield('wg_content')
The views directory tree would be:
views
_layouts
default.blade.php
_partials
widget.blade.php
_modules
mymodule.blade.php
page
mypage.blade.php
Now when you make the view from the controller you should call mypage.
The magic directive is #overwrite in the bottom of module template.
Now when you call the module, the system get the widget template and wrap mymodule, then add this to the page and finally wrap everything within default which is the main template.
This help you to share a template with others. I know you have question, ASK! XD
In my application.hbs file I have an application wide nav bar.
<div class="row nav">
<div class="large-12 colummns">
<ul class="inline-list top-nav">
<li><h6>{{#linkTo "about.philosophy"}}ABOUT{{/linkTo}}</h6></li>
<li><h6>//</h6></li>
<li><h6>CONDITIONS</h6></li>
<li><h6>//</h6></li>
<li><h6>PROGRAMS</h6><li>
<li><h6>//</h6></li>
<li><h6>TESTIMONIALS</h6></li>
</ul>
</div>
</div>
<div class="row subnav">
<div class="large-12 colummns">
{{#if renderAboutSubNav}}
{{render 'about/subnav'}}
{{/if}}
</div>
</div>
{{outlet}}
subnav.hbs:
<ul class="inline-list subnav-list">
<li class="subnav-item">{{#linkTo "about.philosophy"}}philosophy{{/linkTo}}</li>
<li class="subnav-item">//</li>
<li class="subnav-item">{{#linkTo "about.leadership"}}leadership{{/linkTo}}</li>
<li class="subnav-item">//</li>
<li class="subnav-item">staff</li>
</ul>
The ABOUT link, when clicked, displays a subnav -- displayed whenever the url contains 'about'. In that subnav are about subpages -- philosophy, leadership, staff. Philosophy is actually the index page of the about section, which is why I am linking ABOUT to about.philosophy:
{{#linkTo "about.philosophy"}}ABOUT{{/linkTo}}
When I click ABOUT, the ember app renders /about/philosophy as it is supposed to, and the ABOUT link and philosophy link in the subnav are set to active.
However, when I click 'Leadership' the leadership link on the subnav is active but not the ABOUT link in the main nav, even though the url reads /about/leadership.
I don't understand why it is doing this.
My router looks like this:
Ew.Router.reopen(location: 'history')
Ew.Router.map ->
#.resource "about", ->
#.route "philosophy"
#.route "leadership"
#.resource "staff"
#.route "conditions"
#.route "programs"
#.route "testimonials"
about.hbs:
<div class="row about-bg">
<div class="large-12 columns">
<div class="row">
<h1 class="about-phil">Eskridge & White</h1>
</div>
</div>
</div>
<div class="row philosophy-content">
<div class="large-9 columns about-us">
{{outlet}}
</div>
</div>
<div class="large-3 columns sidebar">
{{partial 'sidebar'}}
</div>
</div>
The problem here is you are linking to about.philosophy, so when you navigate to about.leadership active class won't be applied.
So make your link-to to point about route,
{{#link-to "about"}}ABOUT{{/link-to}}
And from your about.index route, redirect to about.philosophy route,
so that active class will be always applied to about's link-to whenever you are in the child of about route.
A bin for your case.