When I use the ember vertical collection from https://github.com/html-next/vertical-collection, it only renders new components when clicked on the screen, it does not render new components while scrolling. Here is the code below
{{#vertical-collection model estimateHeight=90 bufferSize=5 staticHeight=true lastReached="loadBelow" as |item|}}
-----
{{/vertical-collection}}
Check the container selector on which the scroll event is added. Faced a similar issue. The issue was that I had a parent container div which grows (flex-grow:1) and I passed the containerSelector as the child element which contained the vertical-collection component. Replaced it with the parent div selector and it works normal now.
<div class="inline-slider-header"></div>
<div class="inline-slider-body"> <!-- Has a styling of flex-grow:1 -->
<div class="list-container">
{{#vertical-collection this.items
tagName="div"
estimateHeight=47
bufferSize=3
containerSelector=".inline-slider-body"
renderAll=false
as |item index|
}}
<div class="item">
<p>{{index}}</p>
<p>{{item.title}}</p>
</div>
{{/vertical-collection}}
</div>
</div>
<div class="inline-slider-footer"></div>
Related
I have created two bootstrap tabs whose data is comming from django functions. I can easily post essential data of all tabs while the tabs are loaded but I want to load data of each tab once the tab is clicked instead of loading all data together.
Bootstrap uses href or data-target to load a tab content. So, when I set django url in href attribute and activate the tab by JavaScript, the django function is invoked but bootstrap does not open the tab. It always opens the first tab.
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active">Profile
</li>
<li role="presentation" class="">Monitor
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content3" name="tab_content3" aria-labelledby="profile-tab">
{% include "setting/monitor.html" %}
</div>
</div>
My JavaScript code is:
<script>
$(document).ready(function(){
switch("{{section}}"){
case 'monitor':
$('#myTabContent #tab_content3').tab('show');
break;
case 'profile':
$('#myTab a[href="#tab_content1"]').click();
break;
}
})
</script>
I have also used the below javascript to activate second tab, but it does not wok.
$("#myTab").tabs("select", 2);
I appreciate your help.
Bootstrap will show the tab which you marked as "active". So when returning the HTML for 2nd tab make that tab as active by adding class="active" attribute to it.
May be you need to pass that information from view in the context and add that class to appropriate tab in the template.
I can seem to find a good answer for my problem. I have a sidebar template which contains a div for each item my model contains. When I have hundreds of items to render, it takes up to 8-10 seconds to render the template. I am using ember-data.
How can I render the items that are loaded before it finishes fetching the entire model?
Here is my template :
{{#each conv in model itemController='singleconv'}}
{{#if (equals conv.url selectedSubuserEmail)}}
<div class="conversation-content-wrapper" {{action "clickConv" conv preventDefault=false}}>
<div class="history-message-assigned in-progress-closed" style="display:none;"><p><i class="icon-x"></i>Conversation closed</p></div>
<div class="history-message-assigned in-progress-assignation" style="display:none;"><p><i class="icon-assign"></i>Conversation assigned</p></div>
<div class="history-message-assigned in-progress-reopen" style="display:none;"><p><i class="icon-re-opened"></i>Conversation re-opened</p></div>
<div class={{conv.selectedClass}}>
<div class="conversation-time-history">{{{conv.status}}}</div>
<div class="conversation-details">
<span class="unread-numbers"></span>
{{input type='checkbox' class='chk-conversation' checked=conv.isChecked}}
<span class="conversation-name">{{conv.customer.name}}</span>
<span class="phone-number">{{conv.customer.cellPhoneNumber}}</span>
<p class="conversation-text">{{conv.lastMessage}}</p>
</div>
</div>
</div>
{{/if}}
{{/each}}
This is the main problem in ember's rendering which is getting much better by time, Ember connects all your binding to your created models so it re-renders the view on every added model, and hence the delay.
And I've been in the same situation, you have a couple of solutions here
1- Using Ember.ListView
You can use Ember list-view which is an Ember plug-in that adds lazy rendering to a List of items, very useful if you have items that can be displayed in the same height in pixels.
2- Using Ember Cloaking
Ember Cloaking is about the same as list-view but has flexible heights, although you still need to compute them before rendering.
3- Using visibility checker like waypoints
I've done this myself and its a little tedious but plug-in free none the less
You create a variable in your component that is set to true when it's visible in the waypoint.
sample code, not a real one
export default Ember.Component.extend({
visible:false,
didInsertElement:function() {
var waypoint = new Waypoint({
element: this.$()[0],
handler: function(direction) {
this.set('visibile',true)
}.bind(this)
})
}
})
Then Move your content into this component
And then inside this component:
{{#if visibile}}
<div class="conversation-content-wrapper" {{action "clickConv" conv preventDefault=false}}>
<div class="history-message-assigned in-progress-closed" style="display:none;"><p><i class="icon-x"></i>Conversation closed</p></div>
<div class="history-message-assigned in-progress-assignation" style="display:none;"><p><i class="icon-assign"></i>Conversation assigned</p></div>
<div class="history-message-assigned in-progress-reopen" style="display:none;"><p><i class="icon-re-opened"></i>Conversation re-opened</p></div>
<div class={{conv.selectedClass}}>
<div class="conversation-time-history">{{{conv.status}}}</div>
<div class="conversation-details">
<span class="unread-numbers"></span>
{{input type='checkbox' class='chk-conversation' checked=conv.isChecked}}
<span class="conversation-name">{{conv.customer.name}}</span>
<span class="phone-number">{{conv.customer.cellPhoneNumber}}</span>
<p class="conversation-text">{{conv.lastMessage}}</p>
</div>
</div>
</div>
{{/if}}
and then the "for-each" block
{{#each conv in model itemController='singleconv'}}
{{the-component conv=conv}}
{{/each}}
Then use a counter or something to make the first 10 visible.
As I said this is only a simple example you can dig more into it.
I have inserted below part of a template called Chapters. This section of the template calls onto 2 components. I want that when a property change into the New-Writer component to rerender the Am-Editor component. I understand how rerender a view from the Ember docs but how can I programatically rerender the "parent" view from within a component placed into the view in question? Another option would be to able to rerender a component programatically from another component.
<div {{bind-attr class="row togglebook"}} style="padding-top: 40px"> <!-- chapters Display -->
{{#each chapter in book.chapters}}
<div class="col-md-6" style="padding-bottom: 70px">
<div class"center-block">
{{am-editor divIDNumber=_view.contentIndex chapter=chapter book=book}}
<div class"center-block" style="padding-left: 58px; padding-right: 20px">
{{#if toggleChapterDataShowBool}}
{{new-writer divIDNumber=_view.contentIndex chapter=chapter book=book}}
{{/if}}
</div>
</div>
</div>
{{/each}}
</div>
You can send and event from the child view, let that event bubble up and from any of the handling parents you can instruct a re-render.
I am encountering an issue with Jquery Mobile :
I want to display a grid of items using three columns. Each new item must be displayed next to the previous one and begin a new line after the third column.
To give you an example, I want something like this : JSFiddle
But my items have to be items from a splitButtonList (an icon with labels on the left and a clickable button on the right) instead of the blocks from the previous example.
The problem is : when I use the kind of code shown below, each new item is display at the bottom of the previous one, like in a list. I cannot manage to display it using my three columns grid pattern JSFiddle.
<body>
<div data-role="page" data-theme="c" id="projets">
<div data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false" id="banniere">
</div>
<div data-role="content" id="content">
<div class="ui-grid-b">
<ul data-role="listview" data-split-icon="star" data-split-theme="a" class="listview">
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
</ul>
</div><!-- /grid-b -->
</div>
<div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer">
</div>
</div>
</body>
Do you have any idea of what to do ? Using CSS maybe ? Any clue would be very precious for me. Thank you
How about this? JSFiddle
You were basically missing the 3 child containers of the grid:
<div class="ui-grid-b">
<div class="ui-block-a">Listview 1 goes here...</div>
<div class="ui-block-b">Listview 2 goes here...</div>
<div class="ui-block-c">Listview 3 goes here...</div>
</div><!-- /grid-b -->
So, as you can see you will need three different listview.
Hope this helps!
I have a 3 column layout in my app. I'm using Semantic UI. So, the layout is:
<div class='ui celled grid'>
<div class='left column'>...</div>
<div class='middle column'>...</div>
<div class='right column'>...</div>
</div>
So, straightforward.
In my application.hbs it is simply:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
{{outlet}}
</div>
And the other 2 columns are in my sub-controller/templates. And this works fine until I need a View. If I need a View, then Ember makes the HTML layout become:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
<div class='ember-view'>
<div class='middle column'><!-- content --></div>
<div class='right column'><!-- content --></div>
</div>
</div>
And the wrapping <div class='ember-view'> breaks my layout. Because I don't always need a View I need a way to make the HTML the same for with or without a View.
At this point, I see 2 solutions. I'll either have to rework my layout in some way (that I'm yet to work out). Or I can get rid of the wrapping div.
But is it possible to get rid of the wrapping div? I tried this:
export default Ember.View.extend({
tagName: null
});
But that doesn't work. I also tried a span, but that still breaks my layout.
Any ideas?
Thanks.
Try using
tagName:''
The empty string as the tagName's value on your view.
Update:
When I brought this to the attention of ember.js contributors, they suggested inheriting the view from
Ember._MetamorphView
https://github.com/emberjs/ember.js/pull/4790