I've got what should be a working example - moving the link-to from the anchor to the table row itself
<table class="table table-hover">
<tbody>
{{#each customer in controller}}
{{#link-to 'customer' customer.id tagName="tr"}}
<td>
<a {{bind-attr href="view.href"}}>click</a>
</td>
{{/link-to}}
{{/each}}
</tbody>
</table>
Using mobile safari when I browse this page and "click" a table row it highlights the "color" of the row (bootstrap table-hover styling) so I know it's seeing that I've touched the row ... yet it won't jump to the route (unless I click the link itself)
How can/should I do a clickable table row with ember's link-to?
also -I'm using fastclick on the site to reduce the 300 ms delay and I killed zoom
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
add the css
td a {
display:block;
width:100%;
}
Add also:
tr {
cursor: pointer;
}
Related
I have a situation where I want to create search in my page. I want to create search without it mixing with the original page as I need to use this same search in more than one page. I created search table in a div in templates folder and named it MySearch.html. Now, I have included that in the main page as {% include 'MySearch.html'%} and it is able to give me the drop down with static text but not with the options that I am filling with query set.
In urls.py -
url(r'Search', myproj.type4.views.ShowSearch, name='Search'),
In ShowSearch() -
def ShowSearch(request):
countryqueryset = Type4Main.objects.all().values('country').distinct()
return render(request,'MySearch.html',{
'countryqueryset':countryqueryset,
})
In MySearch.html -
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<head>
<meta charset="UTF-8"/>
<title> My Search
</title>
</head>
<body>
<div id ="mysearch" name="mysearch">
<table id="mysearchtbl" name="mysearchtbl">
<tr>
<th>
Country
</th>
</tr>
<tr>
<td>
<select id="country">
<option value="0">Select</option>
{% for country in countryqueryset %}
<option value="{{country.country}}">{{country.country}}</option>
{% endfor %}
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
I can only see Select as option when it is merging with the main page. What am I doing wrong?
Views render templates, not the other way round: templates don't call views. If you are not viewing the page via the ShowSearch URL then the data from that view won't be passed to the template.
For data that needs to be included on every page regardless of the view, use a custom template tag.
I'm creating a real time app in Ember.
Every time I receive an update I do the following:
record = serializer.extractSingle(store, type, data);
store.update(socketModel, record);
The update is an drawnNumbers array.
This happens in my view;
{{#each bingoCard in ownBingoCards}}
<div class="col-sm-4">
<div class="table-responsive">
<span class="label label-primary">Card {{bingoCard.id}}</span>
<table class="table table-bordered table-card">
<tbody>
{{#each row in bingoCard.squares}}
<tr>
{{#each number in row itemController='number'}}
{{#if number}}
<td {{bind-attr class='isActive:active'}}>{{number.model}}</td>
{{else}}
<td>X</td>
{{/if}}
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
{{/each}}
ownBingoCards is a computed property
ownBingoCards: function () {
var gameId, userId;
gameId = this.get('id');
userId = this.get('session.content.id');
return this.get('store').filter('bingoCard', function (bingoCard) {
return (bingoCard.get('game.id') === gameId && bingoCard.get('user.id') === userId);
});
}.property('model.bingoCards', 'session.content'),
So everytime a number gets added to the drawnNumbers array it's setting that td to active.
The only problem is, my whole view rerenders make it very laggy. But as soon as I refresh my browser it stops rerendering the whole view and just marking the numbers active. Why does this happen? Why is this refresh needed?
I have a list of items and I want it to be displayed in a table. In handlebars docs, it says that I can access the #index to display the index of each item. However, in ember.js, it seems to have an error with #index.
<table class="table table-condensed table-striped">
<tbody>
{{#each}}
<tr>
<td>{{#index}}</td>
<td>{{name}}</td>
</tr>
{{/each}}
</tbody>
What is the workaround for this?
you can use {{_view.contentIndex}} instead. Preview: http://emberjs.jsbin.com/panoseya/1/edit
at the moment im really frustrated. I ll try to get table filled with some data of my database. Therefore i have a controller and a View.
App.TableController.extend({
content: [],
contentBinding:'App.incidient.content'
})
App.TableView = Ember.CollectionView.extend({
tagName: 'tbody',
itemViewClass: Ember.View.extend({
templateName: 'table'
})
My html code looks like this:
<div class="row-fluid">
<table class="table table-striped">
<thead>
<tr>
<th>
Title
</th>
<th>
Customer
</th>
<th>
Machine
</th>
<th>
Priortity
</th>
<th>
Status
</th>
</tr>
<thead>
{{view App.TableView}}
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="table">
{{#each item in content}}
<td>
{{view item.incidient.title}}
</td>
<td>
{{view item.incidient.customer}}
</td>
<td>
{{view item.incidient.machine}}
</td>
<td>
{{view item.incidient.priority}}
</td>
<td>
{{view item.incidient.status}}
</td>
{{/each}}
</script>
Im not frustrated because of my the code that is not working. It is more about the fact that:
i dont find any good guide or post where i can see how to debug my Application. The Debugging tool from Chrome doesnt help at all, because i can't figure out how to get access to the content of my TableController or better where i can find it.
i dont understand where the App is initializing all of my Controllers and how i can access them. With the old router: it was like 'App.router.myController' but this is not working anymore.
i dont know how to access datas from a different controller. I tried to bind the Table.Controller.content to the 'App.incidient.content' and Ember didnt even throw an exception or something
I hope you can help. I dont think that these question are really difficult to answer but for a noobie like me they are quite fundamental.
Greeting and thank you
Alex
Title may sound stupid, consider the following code
My Handlebars File
<table id="main-table">
<tr>
<td>
<h1>Some Text</h1>
</td>
{{#collection myCollectionView}}
<td>
<table>
<tr><td>{{view.someProperty}}</td></tr>
</table>
</td>
{{/collection}}
</tr>
</table>
My View File
myCollectionView = Ember.CollectionView.extend({
contentBinding: "myController.someArray",
//someArray has say 4 elements
itemViewClass: Ember.View.extend()
})
I want it to render the 4 tables inside the #main-table, it instead renders them outside the #main-table because it encloses my itemViewClass inside the default div tag. I can only change the tagName property but can't set it to nil I guess, any hack for this issue?
The JSFiddle
In response to the first answer
The problem with {{each}} is that, I am using an EditableField as follows:
(just to sound clear, editable field is the one which changes a div to textfield on double click & back to div tag on focus out, simple widget built using ember)
updated Handlebars file
<table id="main-table">
<tr>
<td>
<h1>Some Text</h1>
</td>
{{#collection myCollectionView}}
<td>
<table>
<tr><td>{{view.myEditableField valueBinding="view.content"}}</td></tr>
</table>
</td>
{{/collection}}
</tr>
</table>
updated view file
myCollectionView = Ember.CollectionView.extend({
contentBinding: "myController.someArray",
//someArray has say 4 elements
itemViewClass: Ember.View.extend({
alertFunc: function(){
alert("content did change");
}.observes('content')
})
})
I want an observer to fire whenever the value in one of the editableField is changed, so that I can update my records in database. Can we accomplish this thing using {{each}} helper? also, arrayContentDidChange will only fire if the array length changes
It is possible to do this in a Ember View
App.MyView = Ember.View.extend({
tagName: ''
});
AFAIK, there can't be Ember.View without "real presence" in the DOM, but you can use the {{each}} helper if you don't want to add a view that acts as a container (here a Ember.CollectionView).
Set tagName to null does not work, see Ember.View source code.
Template:
<script type="text/x-handlebars">
<table id="main-table">
<tr>
<td>
<h1>Some Text</h1>
</td>
{{#each App.content}}
<td>
<table><tr><td>{{name}}</td></tr></table>
</td>
{{/each}}
</tr>
</table>
</script>
Code:
App = Ember.Application.create();
App.content = [{name: "foo"}, {name: "bar"}, {name: "baz"}];
See this JSFiddle.