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
Related
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}}
I am building a website using the Django framework where it will display a grid of places (3 per row) however the code below, every place ends up going onto a new line within the column.
<div class="site-container container-fluid">
<div class="row">
<div class="col-md-3 col-lg-2">
<div class="thumbnail">
<a href="{% url 'sites:details' site.id %}">
<img src="{{ site.site_picture}}" class="img-responsive">
</a>
<div class="caption">
<h2>{{ site.site_name }}</h2>
<h4>{{ site.site_street }}</h4>
<!-- View Details -->
View Details <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
</div>
In my browser I see the content I want however every site is on a new line in the column, whereas I would like it to be in a row of three and break onto a new line and then begin another row of three.
Screenshot
I think it is because you are executing all within the
<div class="col-md-3 col-lg-2">
If you inspect the browser do you see only one of these elements? If so then that would be your problem. What you want is something like,
<div class="site-container container-fluid">
<div class="row">
LOOP OUTSIDE OF HERE!!!!!!!! <---------------------
<div class="col-md-3 col-lg-2">
<div class="thumbnail">
<a href="{% url 'sites:details' site.id %}">
<img src="{{ site.site_picture}}" class="img-responsive">
</a>
<div class="caption">
<h2>{{ site.site_name }}</h2>
<h4>{{ site.site_street }}</h4>
<!-- View Details -->
View Details <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
That way you will get multiple columns each holding its own content.
I've this html page. I'm trying to extract the following information of this div:
<div class="clearfix">
<div class="container left">
<div class="logo">
<a href="/teams/belarus/fc-bate-borisov/200/">
<img src="http://cache.images.core.optasports.com/soccer/teams/150x150/200.png" alt="FC BATE Borisov" />
</a>
</div>
</div>
<div class="container middle">
<div class="details clearfix">
<dl>
<dt>Gara</dt>
<dd>Premier League</dd>
<dt>Data</dt>
<dd><span class='timestamp' data-value='1466877600' data-format='d mmmm yyyy'>25 giugno 2016</span></dd>
<dt>Game week</dt>
<dd>14</dd>
<dt>calcio di inizio</dt>
<dd>
<span class='timestamp' data-value='1466877600' data-format='HH:MM'>20:00</span>
(<span class="game-minute">FP'</span>)
</dd>
</dl>
</div>
<div class="details clearfix">
<dl>
<dt>Stadio</dt>
<dd>Borisov Arena (Barysaw (Borisov))</dd>
</dl>
</div>
</div>
<div class="container right">
<div class="logo">
<a href="/teams/belarus/fc-vitebsk/204/">
<img src="http://cache.images.core.optasports.com/soccer/teams/150x150/204.png" alt="FC Vitebsk" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
in particular the tab calcio di inizio - game week - stadio
Actually I've tried this regex: <div[^<>]*class="clearfix"[^<>]*>(?<content>.*?)
but when I test it on https://regex101.com/ I can't run the regex.
I think that the class of the div is associated on multiple divs, so this could be the problem.
And also the doesn't have any class for take it, any idea?
If you add an id to the div you want to get the contents of (for example "myDiv"), you could run the following javascript function to return it's HTML contents:
document.getElementById("myDiv").innerHTML
I am not exactly sure if this is what you want, since its not regex, but if so, I hope this helps!
Might anyone have any idea how to auto-adjust the height of textarea to fill the rest of the space vertically? The easy way is to hard code the style of textarea with height: 300px or something but that is hardly a workable solution in production.
Here is the of my html. Thanks
<body>
<div class="app-page" data-page="home">
<div class="app-topbar">
<div class="app-title">Mobile Email Client</div>
</div>
<div class="app-content">
<div class="app-section">
<div class="app-button" data-target="emailEditor">Compose Email</div>
</div>
</div>
</div>
<div class="app-page" data-page="emailEditor">
<div class="app-topbar">
<div class="app-title"><span class="app-icon"></span>Email Editor</div>
<div class="left app-button" data-back>QUIT</div>
</div>
<div class="app-content">
<div class="app-section" id="editorStatus"></div>
<div class="app-section">
<input class="app-input" id="emailFrom" placeholder="From">
</div>
<div class="app-section">
<input class="app-input" id="emailTo" placeholder="To">
</div>
<div class="app-section">
<input class="app-input" id="emailSubject" placeholder="Subject">
<textarea class="app-input" id="emailMessage" placeholder="Message" rows="10"></textarea>
<div class="app-button green app-submit" id="emailSend">Send</div>
</div>
</div>
</div>
In App.js apparently setting rows="10" attribute for <textarea> is not enough. The <textarea> must also be given a CSS height: auto;
This still does NOT enable you to fill the remainder of the screen dynamically for any sized screens.
In Rails 3.2 I was able to rename a extension to .handlebars.erb in order to be able to use erb tags (mainly <%= image_tag 'image.jpg' %>) in my handlebars templates.
I'm unable to get this going in Rails 4. Im using
gem 'ember-rails'
gem 'handlebars-source'
The error I'm getting:
undefined method `image_tag'
The view in question is the one below, same for any other view:
<div class="row-fluid">
<div class="span12">
<div class="row-fluid distance_0">
<div class="row-fluid divider slide_divider base_color_background">
<div class="container">
<span class="bottom_arrow"></span>
</div>
</div>
<!-- Title and Description -->
<div class="row-fluid slide_content fullwidth">
<div class="container">
<div class="row-fluid text_bar_pattern themeple_sc">
<div class="content_bar">
<h3>
</h3>
<p>
</p>
</div>
{{#linkTo "user.new" class="button_bar"}}{{/linkTo}}
</div>
</div>
</div>
<div class="row-fluid">
<div class="container">
<div class="bottom_shadow_full"></div>
</div>
</div>
<div class="row-fluid distance_2"></div>
<div class="row-fluid distance_2"></div>
<div class="row-fluid">
<div class="container">
<img src="images/old_letters_blur.jpg" alt="">
</div>
</div>
<%= image_tag 'old_letters_blur.jog' %>
<!-- TextBar -->
<!-- TextBar End -->
</div>
</div>
</div>
Any suggestions?