Hello I am trying to develop stock list data along with CRUD application for assignment purpose but only stock list data is getting displayed. Here is my code. Its not displaying the other part (i.e. CRUD part) and its not showing any error as well. I am very new to ember I think it might be some silly mistake but I've tried lot of stuff but I am lost as its not throwing any error. I am not looking or any backed neither I am planning to save data. I just want to show CRUD functionality of EMBER.js some thing like this of angular
Here is my HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ember.js</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- EmberJS dependencies -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.1/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.11/ember-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember-localstorage-adapter/0.3.1/localstorage_adapter.js"></script>
<!-- Lightstreamer JavaScript Client library -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
<script src="http://demos.lightstreamer.com/commons/lightstreamer.js"></script>
<!-- EmberJS code application -->
<script src="js/stockListDemoApp.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="stock">
<div id="wrap">
<div id="top">
<a id="logoEmber" href="http://emberjs.com" target="_blank"><img src="images/ember_logo.png" alt="EMBERLOGO" hspace="0" border="0" /></a>
<div id="title">STOCK-LIST</div>
</div>
<table cellspacing="0" cellpadding="2" width="780" border="0" >
<thead>
<tr class="tableTitle">
<td>Name</td>
<td>Last</td>
<td>Time</td>
<td>Change</td>
<td>Bid Size</td>
<td>Bid</td>
<td>Ask</td>
<td>Ask Size</td>
<td>Min</td>
<td>Max</td>
<td>Ref.</td>
<td>Open</td>
</tr>
</thead>
<tbody>
{{#each item in model}}
<tr {{bind-attr class="item.isOdd:colOdd:colEven"}}>
<td><div {{bind-attr class="item.isOdd:stockNameOdd:stockNameEven"}}>{{item.stock_name}}</div></td>
<td>{{item.last_price}}</td>
<td>{{item.time}}</td>
<td>{{item.pct_change}}</td>
<td>{{item.bid_quantity}}</td>
<td>{{item.bid}}</td>
<td>{{item.ask}}</td>
<td>{{item.ask_quantity}}</td>
<td>{{item.min}}</td>
<td>{{item.max}}</td>
<td>{{item.ref_price}}</td>
<td>{{item.open_price}}</td>
</tr>
{{/each}}
</tbody>
</table>
<div class="disc">Simulated market data.</div>
</div>
</br>
</br>
<script type="text/x-handlebars" data-template-name="index">
<div class="jumbotron">
<h1>Welcome!</h1>
<p>This app demonstrates CRUD with validation in Ember.js</p>
</div>
</script>
<script type="text/x-handlebars" data-template-name="products">
<h1>Products</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="products/index">
<table id="products_table" class="table">
<thead>
<tr>
<th>Name</th>
<th>Author</th>
<th>Price</th>
<th><button type="button" class="btn btn-default new-button" {{action "new"}}><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</thead>
<tbody>
{{#each product in model}}
<tr {{bind-attr id=product.htmlID}}>
<td class="name">{{#link-to "products.show" product}}{{product.name}}{{/link-to}}</td>
<td class="author">{{product.author}}</td>
<td class="price">{{product.price}}</td>
<td class="action-buttons"><button type="button" class="btn btn-default edit-button" {{action "edit" product}}><span class="glyphicon glyphicon-pencil"></span></button>
<button type="button" class="btn btn-default delete-button" {{action "delete" product}}><span class="glyphicon glyphicon-remove"></button></td>
</tr>
{{/each}}
</tbody>
</table>
<p id="products_count">Total: {{controllers.products.productsCount}} products.</p>
</script>
<script type="text/x-handlebars" data-template-name="products/show">
<h2><span class="name">{{name}}</span></h2>
<p>By <span class="author">{{author}}</span></p>
<p><strong>$<span class="price">{{price}}</span></strong></p>
<p><span class="description">{{description}}</span></p>
<p class="action-buttons"><button type="button" class="btn btn-default edit-button" {{action "edit" model}}><span class="glyphicon glyphicon-pencil"></span></button>
<button type="button" class="btn btn-default delete-button" {{action "delete" model}}><span class="glyphicon glyphicon-remove"></button></p>
<p>{{#link-to 'products' class="index-link"}}Back to products index{{/link-to}}</p>
</script>
<script type="text/x-handlebars" data-template-name="products/edit">
<h2>{{#if isNew}}New{{else}}Edit{{/if}} Product</h2>
{{#form-for controller id="form-product" wrapper="bootstrap"}}
{{#input name}}
{{label-field name text="Product"}}
{{input-field name class="form-control" autofocus="true"}}
{{#if view.showError}}
{{error-field name}}
{{/if}}
{{/input}}
{{#input author}}
{{label-field author text="Author"}}
{{input-field author class="form-control"}}
{{#if view.showError}}
{{error-field author}}
{{/if}}
{{/input}}
{{#input description}}
{{label-field description text="Description"}}
{{input-field description class="form-control"}}
{{#if view.showError}}
{{error-field description}}
{{/if}}
{{/input}}
{{#input price}}
{{label-field price text="Price"}}
{{input-field price class="form-control"}}
{{#if view.showError}}
{{error-field price}}
{{/if}}
{{/input}}
<button type="submit" class="btn btn-primary save-button" {{action "save" model}}>Save</button>
{{#if isNew}}
<button type="button" class="btn btn-default cancel-button" {{action "delete" model}}>Cancel</button>
{{else}}
<button type="button" class="btn btn-default cancel-button" {{action "cancel" model}}>Cancel</button>
<button type="button" class="btn btn-danger delete-button" {{action "delete" model}}>Delete</button>
{{/if}}
{{/form-for}}
</script>
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.8/ember-data.min.js"></script>
<!-- ember-easyForm -->
<script src="http://builds.dockyard.com.s3.amazonaws.com/ember-easyForm/canary/shas/add6a40a68c8b081557a9011cf99ea255414e1b1/ember-easyForm.min.js"></script>
<!-- ember-validations -->
<script src="http://builds.dockyard.com.s3.amazonaws.com/ember-validations/canary/shas/2ff28c6ba4d227b0f863b327cdff23c381c37afb/ember-validations.min.js"></script>
</body>
</html>
and here is my app.js
App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return $.getJSON('https://ajax.googleapis.com/ajax/services/feed/load?' +
'v=1.0&num=50&q=https://news.google.com/news/feeds?output=rss&callback=?')
.then(function(data){
return data.responseData.feed.entries.map(function(entry){
var post = {};
post.title = entry.title;
return post;
});
});
}});
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend({
namespace: 'ember-crud'
});
Ember.EasyForm.Config.registerWrapper('bootstrap', {
formClass: '',
fieldErrorClass: 'has-error',
inputClass: 'form-group',
errorClass: 'help-block error',
hintClass: 'help-block',
labelClass: ''
});
App.Router.map(function() {
this.resource('products', function() {
this.route('new');
this.route('show', {path: '/:product_id'});
this.route('edit', {path: '/:product_id/edit'});
});
});
App.Product = DS.Model.extend(Ember.Validations.Mixin, {
name: DS.attr('string'),
author: DS.attr('string'),
description: DS.attr('string'),
price: DS.attr('number'),
// To identify html tag for a Product.
htmlID: function() {
return 'product' + this.get('id');
}.property('id'),
validations: {
name: {
presence: true
},
price: {
presence: true,
numericality: {
greaterThanOrEqualTo: 0
}
}
}
});
App.resetFixtures = function() {
App.Product.FIXTURES = [
{
id: 1,
name: 'Ember.js in Action',
author: 'Joachim Haagen Skeie',
description: 'Ember.js in Action is a crisp tutorial that introduces the Ember.js framework and shows you how to build production-quality web applications.',
price: 44.99
},
{
id: 2,
name: 'Building Web Applications with Ember.js',
author: 'Jesse Cravens & Thomas Brady',
description: 'This guide provides example-driven instructions on how to develop applications using Ember, one of the most popular JavaScript frameworks available.',
price: 29.99
},
{
id: 3,
name: 'The Ember.js Way',
author: 'Brian Cardarella & Alex Navasardyan',
description: "Inspired by Addison-Wesley's classic The Rails Way series, The Ember.js Way crystallizes all that's been learned about Ember.js development into a start-to-finish approach that works.",
price: 39.99
},
{
id: 4,
name: 'Instant Ember.JS Application Development: How-to',
author: 'Marc Bodmer',
description: 'A practical guide that provides you with clear step-by-step examples. The in-depth examples take into account the key concepts and give you a solid foundation to expand your knowledge and your skills.',
price: 20.69
}
];
};
App.resetFixtures();
App.ProductsRoute = Ember.Route.extend({
model: function() {
return this.store.find('product');
},
actions: {
// Redirect to new form.
new: function() {
this.transitionTo('products.new');
},
// Redirect to edit form.
edit: function(product) {
this.transitionTo('products.edit', product);
},
// Save and transition to /products/:product_id only if validation passes.
save: function(product) {
var _this = this;
product.validate().then(function() {
product.save();
_this.transitionTo('products.show', product);
});
},
// Roll back and transition to /products/:product_id.
cancel: function(product) {
product.rollback();
this.transitionTo('products.show', product);
},
// Delete specified product.
delete: function(product) {
product.destroyRecord();
this.transitionTo('products');
}
}
});
App.ProductsController = Ember.ArrayController.extend({
productsCount: function() {
return this.get('model.length');
}.property('#each')
});
App.ProductsIndexRoute = Ember.Route.extend({
model: function() {
return this.modelFor('products');
}
});
App.ProductsIndexController = Ember.ArrayController.extend({
needs: ['products'],
sortProperties: ['name']
});
App.ProductsEditRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('product', params.product_id);
},
// Roll back if the user transitions away by clicking a link, clicking the
// browser's back button, or otherwise.
deactivate: function() {
var model = this.modelFor('products.edit');
if (model && model.get('isDirty') && !model.get('isSaving')) {
model.rollback();
}
}
});
App.ProductsNewRoute = Ember.Route.extend({
model: function() {
return this.store.createRecord('product');
},
isNew: true,
renderTemplate: function(controller, model) {
this.render('products.edit', {
controller: controller
});
},
// Roll back if the user transitions away by clicking a link, clicking the
// browser's back button, or otherwise.
deactivate: function() {
var model = this.modelFor('products.new');
if (model && model.get('isNew') && !model.get('isSaving')) {
model.destroyRecord();
}
}
});
Related
I have a topic list that receive a bootstrap popover event on page load.
But when I add new topics to this list without reload page I can't bind popover event in this new topic.
My code is organized in this way:
Forum route:
export default Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
run: this.store.find('run', this.modelFor('dialogo.admin.manager').get('id')),
topics: this.store.find('topic', { run: this.modelFor('dialogo.admin.manager').get('id') })
});
},
setupController: function (controller, model) {
controller.set('runID', this.modelFor('dialogo.admin.manager').get('id'));
controller.set('model', model.topics);
controller.set('currentRun', model.run);
}
});
Forum Controller:
export default Ember.Controller.extend({
needs: ['application'],
activeUser: Ember.computed.alias("controllers.application.model"),
actions: {
createTopic: function() {
var
store = this.get('store'),
user = this.get('activeUser'),
run = this.get('currentRun'),
topic;
topic = store.createRecord('topic', {
content: '',
run: run,
moderator: user
});
this.set('newTopic', topic);
},
saveNewTopic: function() {
var newTopic = this.get('newTopic');
var topicList = this.get('model');
newTopic.save().then(function(topic){
topicList.pushObject(topic);
Ember.$('#newTopic').modal('hide');
});
},
deleteTopic: function (topic) {
topic.destroyRecord();
}
}
});
Forum View:
export default Ember.View.extend({
didInsertElement: function() {
this.$('[data-toggle="popover"]').popover({
html : true,
content: function() {
var delID = Ember.$(this).attr('data-del');
return Ember.$('#alertDel' + delID).html();
}
});
}
});
Forum Template:
<tbody>
{{#each topic in model}}
<tr>
<th scope="row">{{topic.id}}</th>
<td>{{topic.content}}</td>
<td>{{topic.posts.length}}</td>
<td>0</td>
<td>
<button class="btn btn-default" type="button" data-toggle="popover" data-placement="top" data-trigger="focus" data-del="{{topic.id}}" title="ATENÇÃO: Deletar tópico">
DEL
</button> |
<span>EDIT</span> |
<span>PEND</span> |
<span>MOD</span>
<div id="alertDel{{topic.id}}" style="display: none;">
Você deseja deletar o tópico #ID {{topic.id}}?
Essa ação não poderá ser desfeita.
<br><br>
<button class="btn btn-danger" {{action 'deleteTopic' topic}}>Sim</button> |
<button class="btn btn-default">Não</button>
</div>
</td>
</tr>
{{else}}
<tr>
<td rowspan="5">Nenhum tópico encontrado...</td>
</tr>
{{/each}}
</tbody>
So, when I execute saveNewTopic and add this new topic to topicList, I lost my popover event.
Anyone have a clue about how can I bind my popover event on new topic instances?
You can refer to ember cookbook on how to handle bootstrap pop over, which the best way would be creating a component or rendering from router with an action.
http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/using_modal_dialogs/
App.ApplicationRoute = Ember.Route.extend({
actions: {
showPopUp: function(name, content){
//the controller for will help you let you access the content from your controller (if using a component)
this.controllerFor(name).set('content', content);
this.render(name, {
into: 'application',
outlet: 'popup'
});
},
removePop: function(){
this.disconnectOutlet({
outlet: 'popup',
parentView: 'application'
});
}
}
}
});
In your main application.hbs you need to add the pop up outlet
<setion id="main-content">
{{ outlet }}
</section>
<section id="footer-scroll">
{{partial "partials/footer"}}
</section>
{{outlet 'popup'}}
You would trigger the show pop up event like this
<a href="#" {{action 'showPopUp' 'select-country-pop' this}} class="cl-7 footer-text-desk ft-w-600">
In your forum template you can use it the same way
<button class="btn btn-default" type="button" data-del="{{topic.id}}" title="ATENÇÃO: Deletar tópico" {{action 'showPopUp' 'popuptemplate' this}}>
DEL
</button>
You need to create the pop up template, for your sanity it would be easier if you create a component
"this", just means it would inherit the data from your model
This is my menu bar code in html
<script type="text/x-handlebars" data-template-name="links">
<div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li>{{#link-to "myleaves" 1255 action="myleavesinfolist"}}My Leave{{/link-to}}</li>
<li>{{#link-to "approvalrequests" 1255 action="appreqlist"}}Approval Requests{{/link-to}}</li>
<p class="navbar-text navbar-right"><button type="button" class="btn btn-info" {{action "logout"}}>Logout</button></p>
<p class="navbar-text navbar-right"><font color="white" size=4>Welcome {{model.userName}}</font></p>
</ul>
</div>
{{outlet}}
Here is my ember js code
App.Router.map(function () {
this.resource("signin", {path: "/"});
this.resource("links", {path: "/:id"},
function () {this.resource("myleaves",path: "/myleaves/:id"});
this.resource("approvalrequests", {path: "/appreq/:id"});
});
});
am bringing data by below code
App.LinksController = Ember.ObjectController.extend({
actions: {
myleavesinfolist: function () {
rdata = $.ajax({
type: "POST",
url: "/myleaves",
dataType: "json",
async: false
}).responseJSON;
this.transitionToRoute("myleaves", rdata);
} //myleavesinfolist
,
appreqlist: function () {
rdata = $.ajax({
type: "POST",
url: "/aprreq",
dataType: "json",
async: false
}).responseJSON;
final = filterData(rdata);
console.log(final);
this.transitionToRoute("approvalrequests", final);
} //appreqlist
} //actions
}); //controller
but when i click on menu link "myleaves " or "approval requests"
my url is like
http://localhost:8888/Leave.html#/undefined/myleaves/undefined
i dont knw why this undefined is coming..
PLease help
am a newbie
link-to expects a model object as its second argument, rather than an id.
So you’ll likely want to load the models for myleaves and approvalrequests earlier on—perhaps in your ApplicationRoute:
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
myLeaves: this.store.find('leaves'), // or however you fetch model data
approvalRequests: this.store.find('approval-request') // ditto
});
}
});
And the template becomes:
<script type="text/x-handlebars" data-template-name="links">
<div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li>{{#link-to "myleaves" myLeaves action="myleavesinfolist"}}My Leaves{{/link-to}}</li>
<li>{{#link-to "approvalrequests" approvalRequests action="appreqlist"}}Approval Requests{{/link-to}}</li>
</ul>
<p class="navbar-text navbar-right"><button type="button" class="btn btn-info" {{action "logout"}}>Logout</button></p>
<p class="navbar-text navbar-right"><font color="white" size=4>Welcome {{model.userName}}</font></p>
</div>
{{outlet}}
</script>
EDIT
Based on your model code—and the fact that your requests don’t actually depend on the ID—I’d suggest the following:
App.Router.map(function () {
this.resource('signin', { path: '/' });
this.resource('links', { path: '/links' }, function() {
this.resource('my-leaves', { path: '/myleaves' });
this.resource('approval-requests', { path: '/appreq' });
});
});
function getJSONByPost(url) {
return $.ajax({
url: url,
type: 'POST',
dataType: 'json'
});
}
App.MyLeavesRoute = Ember.Route.extend({
model: function() {
return getJSONByPost('/myleaves');
}
});
App.ApprovalRequestsRoute = Ember.Route.extend({
model: function() {
return getJSONByPost('/aprreq');
}
});
Your template becomes:
<script type="text/x-handlebars" id="links">
<div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li>{{#link-to "my-leaves"}}My Leaves{{/link-to}}</li>
<li>{{#link-to "approval-requests"}}Approval Requests{{/link-to}}</li>
</ul>
<p class="navbar-text navbar-right"><button type="button" class="btn btn-info" {{action "logout"}}>Logout</button></p>
<p class="navbar-text navbar-right"><font color="white" size=4>Welcome {{userName}}</font></p>
</div>
{{outlet}}
</script>
This is a bit of a departure from what you currently have. It’s hard to know the full structure and flow of your app without speaking directly. Nevertheless, I hope it’s of some use.
I have a users template which is a table of users. Under that table is a link to create a new user. For better UX I'd like to disable it by using class="disabled" or hide that link during the create of a new user. What is the best way to do that?
index.html
<script type="text/x-handlebars" data-template-name="users">
<div class='row'>
<div class='span7'>
<table class='table table-striped'>
<tbody>
{{#each model itemController="user"}}
<tr {{bindAttr class="isDirty:warning"}}>
<td>{{lastName}}</td>
</tr>
{{/each}}
</tbody>
</table>
<p>
{{#linkTo 'users.new' classNames="btn btn-small"}}Create a new user{{/linkTo}}
</p>
</div>
<div class='span5'>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="users/new">
<p><strong>Last name</strong><br>{{view Ember.TextField valueBinding=lastName}}</p>
<p>
{{#if isDirty}}
<button {{action 'save' this}} class="btn btn-small">Save</button>
{{else}}
<button class="btn btn-small disabled">Save</button>
{{/if}}
</p>
</script>
app.js
App.UsersRoute = Ember.Route.extend({
model: function() {
return App.User.find();
}
});
App.UsersNewRoute = Ember.Route.extend({
model: function() {
return App.User.createRecord();
},
renderTemplate: function() {
this.render({ into: 'users' });
}
});
App.UsersNewController = Ember.ObjectController.extend({
save: function(model) {
model.get('transaction').commit();
App.Router.router.transitionTo('users.index')
}
});
I think one possible solution would be to add a property in the usersController, something like 'isCreating', which you can set to true in the activate hook of the UsersNewRoute, and reset to false in the deactivate. This would be something like:
App.UsersNewRoute = Ember.Route.extend({
activate: function() {
this.controllerFor('users').set('isCreating', true);
},
deactivate: function() {
this.controllerFor('users').set('isCreating', false);
},
model: function() {
return App.User.createRecord();
},
renderTemplate: function() {
this.render({ into: 'users' });
}
});
Obviously you will use this property in the template and bind the class to hide the button.
I have a list of users which are displayed in a master view on the left side (Twitter Bootstrap CSS). Details of each user can be shown by clicking the show button. They will be displayed on the right side (detail).
How can I remove the show button for the currently displayed user? e.g. #/users/1 shouldn't render the show button for the first user.
index.html
<script type="text/x-handlebars" data-template-name="users">
<div class='row'>
<div class='span4'>
<table class='table table-striped'>
{{#each model}}
<tr>
<td>{{lastName}}</td>
<td>{{#linkTo 'user' this}}<button class="btn" type="button">show</button>{{/linkTo}}</td>
</tr>
{{/each}}
</table>
</div>
<div class='span8'>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="user">
<h1>{{firstName}} {{lastName}}</h1>
</script>
app.js
App = Ember.Application.create();
App.Store = DS.Store.extend({
revision: 12,
adapter: 'DS.FixtureAdapter'
})
App.Router.map(function() {
this.resource('users', function() {
this.resource('user', { path: ':user_id' })
})
});
App.UsersRoute = Ember.Route.extend({
model: function() {
return App.User.find();
}
});
App.User = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string')
})
App.User.FIXTURES = [{
id: 1,
firstName: "Bill",
lastName: "Clinton"
}, {
id: 2,
firstName: "Barack",
lastName: "Obama"
}]
Ember provides some support for doing what you want. By default it sets the "active" css class on the selected element. You can find more information about that here: http://emberjs.com/api/classes/Ember.LinkView.html (note that the {{#linkTo}} is just a helper based on the LinkView).
The simplest way to override this behavior, since instead of "active" you want to hide the button, would be to make use of the hide class that comes with Twitter Bootstrap. So your users template would look like:
<script type="text/x-handlebars" data-template-name="users">
<div class='row'>
<div class='span4'>
<table class='table table-striped'>
{{#each model}}
<tr>
<td>{{lastName}}</td>
<td>{{#linkTo 'user' this activeClass="hide"}}<button class="btn" type="button">show</button>{{/linkTo}}</td>
</tr>
{{/each}}
</table>
</div>
<div class='span8'>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="user">
<h1>{{firstName}} {{lastName}}</h1>
</script>
I want button to call removeAlbum function in controller. But it does nothing. When i click the button nothing happens and there are no errors... What should i do to fix that?!
This is my template:
<script type="text/x-handlebars" data-template-name="albums">
{{#if App.albumsController.total}}
<div><h1>Количество альбомов: {{App.albumsController.total}}</h1></div>
{{#each content in App.albumsController}}
<div class='album'>
<div class='image'>
<a {{action showAlbum content href=true}}>
<img {{bindAttr src="content.avatarUrl"}}>
</a>
</div>
<div class='info'>
<h2>
<a {{action showAlbum content href=true}}>
{{content.title}}
</a>
</h2>
<div>{{content.description}}</div>
</div>
<div class='actions'>
<div>
<button {{action removeAlbum content target="App.albumsController"}}>Delete</button>
</div>
</div>
<div class='clear'></div>
</div>
{{/each}}
{{else}}
<div><h1>Loading</h1></div>
{{/if}}
</script>
This is my controller:
App.albumsController = Em.ArrayController.create({
content: [],
total: null,
loadAlbums: function(){
this.set('content', []);
this.set('total', null);
var self = this;
$.post(App.connection.url, {method: 'albums.getAll', params: {user_id: App.connection.userId}}, function(response){
self.set('total', response.albums.total);
response.albums.album.forEach(function(item){
var buf = App.AlbumInList.create({
id: item.id,
title: item.title,
description: item.description,
avatarUrl: item.thumbnail_video.thumbnails.thumbnail[1]._content
});
self.pushObject(buf);
});
});
},
removeAlbum: function(x){
console.log('remove it');
}
});
Try to set your target to controller instead of App.albumsController. Should solve the problem.
<button {{action removeAlbum content target="controller"}}>Delete</button>