i'm trying to include a Modal, specifically this one: http://awkward.github.io/backbone.modal/ for each one of the models in a collection.
First i tried with a handlebars template, but it didn't work i don't know if it is for using _underscore so i change but i can't see why is not working.
Here is my function that use in the View that executes on a click for a rendered model:
detalleProducto : function(event){
var id = $(event.currentTarget).data('id');
var item = this.collection.get(id);
var templt = _.template("<div class='bbm-modal__topbar'>\
<h3 class='bbm-modal__title'> <%= item.nombre %> </h3>\
</div>\
<div class='bbm-modal__section'>\
<img src='img/modal/ <%= item.imagen %>' />\
<p><%= item.descripcion %></p>\
<p><%= item.presentacion %></p>\
</div>\
<div class='bbm-modal__bottombar'>\
<a href='#' class='bbm-button'>Close</a>\
</div>"
);
var tmpl = templt({item: item.attributes});
var Modal = Backbone.Modal.extend({
template: tmpl,
cancelEl: '.bbm-button'
});
var modalView = new Modal();
$('#app').html(modalView.render().el);
},
In the console says me Uncaught TypeError: Property 'template' of object [object Object] is not a function.
So, maybe im not passing the template correctly??
I appreciate all or your help.
Thanx...
Related
I have created a dialog box using the ember-modal-dialog. The content that is going to displayed in the dialog is received from the server. I am able to make the call to server and fetch the data. But I don't know how to save the data into my model store from actions.
Controller.js
actions:{
fiModal1: function(photo){
Ember.$('body').addClass('centered-modal-showing');
var currentState = this;
photo.toggleProperty('fidialogShowing'))
console.log('opendialog');
raw({
url: 'http://example.co.in/api/photo/'+photo.get('like_pk')+'/likes/',
type: 'GET',
}).then(function(result){
currentState.set('model.feed.liker',result)
});
},
bookmarked:function(liker){
liker.set('is_bookmarked',true)
},
}
feed.hbs
<p {{action "fiModal" photo }}>
{{photo.0.numlikes}}
</p>
{{#if photo.fidialogShowing}}
{{#modal-dialog translucentOverlay=true close = (action "fiDialogClose" photo)}}
{{#each model.feed.liker as |liker}}
<div class = "col-sm-6">
{{#if liker.is_bookmarked}}
<a href {{action "unbookmarked" liker}}>
<img class="foll" src = "images/button-bookmark-secondary-state-dark-b-g.png">
</a>
{{else}}
<a href {{action "bookmarked" liker}}>
<img class="foll" src = "images/button-bookmark.png">
</a>
{{/if}}
</div>
{{/each}}
Now the problem is that when action inside the dialog box is fired it throws an error:
fiver.set is not function
I think that the problem is occurring because I am not saving the result in the model store. How should I do it so the action inside the dialog box also works?
You can just encapsulate the results from your server into Ember.Object
Ember.Object.create(json)
For exemple replace your line
currentState.set('model.feed.liker',result)
by
currentState.set('model.feed.liker', result.map(function(item) {
return Ember.Object.create(item);
})
that way each elements inside your model.feed.liker should have a method 'set' available.
I have two div, have open the same modal window:
<div id="regulatorias" data-toggle="modal" data-target="#myModalReguOpor" data-alert="regulatorias">
Content...
</div>
<div id="oportunidades" data-toggle="modal" data-target="#myModalReguOpor" data-alert="oportunidades">
Content...
</div>
When invoking the event that opens the modal, I want to get the id atribute or the value of the data-alert, of the div which I am clicking.
$("#myModalReguOpor").on('shown.bs.modal', function () {
// here I want to get the id or data-alert value, about the div that i'm clicking
});
How could make it?
Thanks,
You can do like this
$(document).ready(function(){
$('#myModalReguOpor').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).attr('id');
alert(id);
});
});
I would suggest to replace id with data-attribute like data-id="regulatorias" in modal trigger button
<div data-id="regulatorias" data-toggle="modal" data-target="#myModalReguOpor" data-alert="regulatorias">
Content...
</div>
and in JS
$(document).ready(function(){
$('#myModalReguOpor').on('shown.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
});
});
I'm trying to append HTML elements to the UI upon user clicks, such elements would be assembled and precompiled within a view component like this:
NewElementView = Ember.View.extend(
tagName: 'li',
click: ((event)->
this.insertElement()
),
blueprint: (->
'<div id="{{dom_id}}">
<textarea></textarea>
<button {{action "submit"}}>Save</button>
</div>'
).property()
insertElement: (->
html = this.get("blueprint")
template = Ember.Handlebars.compile(html)
context = { dom_id: "foo" }
Ember.$(template(context)).appendTo("#container")
)
)
When running Ember.Handlebars.compile(html) line it raises Uncaught TypeError: Cannot read property 'push' of undefined
Any idea of why?
Thanks in advance!
Ember.Handlebars.compile expects an object with a data property.
What you are trying to do can be achieved with the following
template
<script type="text/x-handlebars" data-template-name="my-custom-view">
<div {{bind-attr id='view.dom_id'}}>
<textarea></textarea>
<button {{action "submit"}}>Guardar</button>
</div>
</script>
code
App.NewElementView = Ember.View.extend
tagName: 'li'
click: (event) ->
#insertElement()
insertElement: ->
view = Ember.View.create
templateName: "my-custom-view"
container: #container
dom_id: "foo"
view.appendTo("#container")
Here a working example http://emberjs.jsbin.com/rapepepogi/17/edit?html,js,output
Hello I've been stuck for days how to display a post's delete button only for the post's author in Ember.js (I'm using ember-cli to build this). I don't know where to put the logic of "When hovering a post (list), if the post's author is equal to currently logged in user, then display the delete button" I am lost. Please help me.
in template app/templates/posts.hbs
{{#each}}
<div class="eachPost">
{{#view 'posts'}}
<div class="postProfilePhoto">
{{#link-to 'users' }}
<img src="" alt="Profile Photo">
{{/link-to}}
</div>
<div class="eachPostContent">
<p class="postAuthor"><strong>{{user.id}}</strong></p>
<p class="postContent">{{body}}</p>
<span class="timePosted"><em>somtimes ago</em></span>
{{#if view.entered}}{{#if isAuthor}}
<a class="deletePost" {{action "removePost" this}}>Delete</a>
{{/if}}{{/if}}
</div>
{{/view}}
</div>
{{/each}}
in views app/views/posts.js
var Posts = Ember.View.extend({
classNames: ['eachPostContent'],
mouseEnter: function(event){
this.set('entered', true);
this.get('controller').send('isAuthor', this.get('post').user);
},
mouseLeave: function(){
this.set('entered', false);
}
});
export default Posts;
in controller app/controllers/posts.js
var PostsController = Ember.ArrayController.extend({
...
isAuthor: function(user){
if(this.get('session').user !== null && user === this.get('session').user){
return true;
} else {
return false;
console.log('You are not author');
}
}
}
});
export default PostsController;
SOLVED
in app/templates/posts.hbs
{{#each itemController="post"}}
<div class="eachPost">
created app/controllers/post.js
var PostController = Ember.ObjectController.extend({
isAuthor: function(){
return this.get('user') === this.get('session').user;
}.property('user')
});
export default PostController;
delete following code from app/views/posts.js
this.get('controller').send('isAuthor', this.get('post').user);
and deleted isAuthor function from app/controllers/posts.js
As mentioned above, you'll want to use an itemController
var PostsController = Ember.ArrayController.extend({
itemController:'post',
...
});
And then in the itemController you will create a computed property that checks the user id against the author id of the post
var PostController = Ember.ObjectController.extend({
isAuthor: function(){
//assuming the user property exists on an individual post model
return this.get('user') === this.get('session').user;
}.property('user')
})
I am trying to display the details of items in a list. This should be done by lazy loading the template (DOM for the details), because the template is very large and i've got many items in the list so a ng-show with ng-include is not working, since it is compiled into the DOM and makes the performance very bad.
After experimenting I figured out a solution, only working with a inline template. I am using a click handler to render the HTML with the detail-view directive to the DOM.
HTML
<div ng-controller="Ctrl">
{{item.name}} <button show-on-click item="item">Show Details</button>
<div class="detailView"></div>
<div ng-include="'include.html'"></div>
</div>
<!-- detailView Template -->
<script type="text/ng-template" id="detailView.html">
<p>With external template: <span>{{details.description}}</span></p>
</script>
Show On Click Directive
myApp.directive("showOnClick", ['$compile', '$parse', function($compile, $parse) {
return {
restrict: 'A',
scope: {
item: "=item"
},
link: function (scope, element, attrs) {
// Bind the click handler
element.bind('click', function() {
// Parse the item
var item = $parse(attrs.item)(scope);
// Find the element to include the details
var next = $(element).next('div.detailView');
// Include and Compile new html with directiv
next.replaceWith($compile('<detail-view details="item"></detail-view>')(scope));
});
}
};
}]);
Detail View Directive:
myApp.directive("detailView", ['$parse', '$templateCache', '$http', function($parse, $templateCache, $http) {
return {
restrict: 'E',
replace: true,
templateUrl: 'detailView.html', // this is not working
// template: "<div>With template in directive: <span>{{details.description}}</span></div>", // uncomment this line to make it work
link: function (scope, element, attrs) {
var item = $parse(attrs.details)(scope);
scope.$apply(function() {
scope.details = item.details;
});
}
};
}]);
Here is the full example on
Plunker
Is there a way to improve my solution, or what am I missing to load the external template?
Thanks beforehand!
You can also look at ng-if directive in Angular version 1.1.5 . ng-if would only render the html if condition is true. So this becomes
<div ng-controller="Ctrl">
{{item.name}} <button ng-if="showDetails" item="item" ng-click='showDetails=true'>Show Details</button>
<div class="detailView"></div>
<div ng-include="'include.html'"></div>
</div>
By just using ng-include:
<div ng-controller="Ctrl" ng-init="detailsViewTemplateSource='';">
{{item.name}}
<button ng-click="detailsViewTemplateSource = 'detailView.html'">
Show Details
</button>
<div ng-include="detailsViewTemplateSource"></div>
</div>
<!-- detailView Template -->
<script type="text/ng-template" id="detailView.html">
<p>With external template: <span>{{details.description}}</span></p>
</script>