I am trying to delete an item from my data attribute. A delete is triggered by the delete button on each item. That they triggers the deleteItem(index) function in the child component, which then emits to the parent. But for some reason it never triggers the event handler in the parent.
Help with the drag n drop would be a plus as well. Thank you.
https://jsfiddle.net/4Ld0ubjt/
<html>
<head>
<title>
</title>
<!--- Import Vue.js library --->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="vue.js"></script>
</head>
<body>
<div class="panel-body">
<div id="itemsApp" #delete-item="deleteItem(idx)">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item"></list-item>
</div>
</div>
<div class="panel-footer clearfix">
</div>
</div>
</body>
</html>
<!--- END: Main body --->
/**
* Function to run after the Document has completed loading.
*/
$(function () {
/**
* Load and initialize the Module Object
*/
Vue.component('list-item', {
props: ['item', 'index'],
template: `
<div draggable="true" #dragStart="dragstart(index, $event)" #dragFinish="dragfinsih(index, $event)" class="bookmark list-group-item clearfix" :id="index">
<span class="btn glyphicon glyphicon-menu-hamburger pull-left" title="Move Bookmark"></span>
<a :href="item.URL_TE" :id="item.URL_HSH_NR">{{item.URL_NA}} - {{index}}</a>
<div class="btn-group pull-right">
<a class="btn btn-default glyphicon glyphicon-pencil edit" role="button" title="Edit Bookmark" href="##"></a>
<button v-on:click="deleteItem(index)" class="btn btn-danger glyphicon glyphicon-remove delete" title="Delete Bookmark"></button>
</div>
</div>
`,
methods: {
deleteItem(idx) {
console.log("Index? " + idx);
this.$emit('delete-item', idx);
},
/**********START DRAG AND DROP LOGIC********** */
dragstart(which, ev) {
console.log("In dragStart " + JSON.stringify(ev));
ev.dataTransfer.setData('Text', which.index);
ev.dataTransfer.dropEffect = 'move'
this.dragging = which;
},
dragfinish(to, ev) {
this.moveItem(this.dragging, to);
},
moveItem(from, to) {
this.bookmarks.splice(to, 0, this.bookmarks.splice(from, 1)[0]);
}
/**********END DRAG AND DROP LOGIC********** */
},
})
var itemsApp = new Vue({
el: '#itemsApp',
data: {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.data.splice(i, 1);
}
}
})
});
Event handler should be on child component
<div id="itemsApp">
<list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item" #delete-item="deleteItem"></list-item>
</div>
In Vue component, data should be a function
var itemsApp = new Vue({
el: '#itemsApp',
data() {
return {
items: [
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
},
{
"URL_NA": "Some text",
"URL_HSH_NR": 558493829494,
"URL_TE": "SOME MORE TEXT"
}
]
}
},
methods: {
deleteItem(i) {
console.log("In parent deleteItem " + i);
this.items.splice(i, 1);
}
}
})
You can check demo here
Related
What I have
I'm importing the same component twice. This component is used to display a dropdown with collections.
When an item in the dropdown is selected, an event is triggered.
The component is imported in list.js and in BulkActions.vue.
The problem
An event is fired when a collection in the dropdown is selected. It then triggers an event using $emit. Somehow this event is only catched in list.blade.php and not in BulkActions.vue.
For both dropdowns (loading from the same component) there should be a different behaviour.
I have no idea why this happens or why the event is only catched at my root.
What I've tried
I've tried to pass an additional prop in the HTML to have a "variable event name", but that didn't work. I've tried various ways of importing the component as well.
Does anyone know how to solve this issue?
The files
list.blade.php:
<div class="media-list-navbar mt-3 mb-3">
<shown-results :text="resultText"></shown-results>
<search-bar #update-filters="updateFilters"></search-bar>
<document-types #update-filters="updateFilters"></document-types>
<collection-dropdown eventname="update-filters"
#update-filters="updateFilters"></collection-dropdown>
<div class="clearfix"></div>
</div>
<bulk-actions #select-all="selectAll"
#deselect-all="deselectAll"
:items="items"
:multiselect="multiSelect"></bulk-actions>
BulkActions.vue
<template>
<div class="multiselect-list-navbar mt-3 mb-3" v-if="multiselect">
<div class="float-left">
<button type="button"
class="btn btn-outline-secondary"
#click="$emit('deselect-all')">
<i class="fas fa-fw fa-times"></i> {{ Lang.get('media/item.index.list.multi-select.deselect-all') }}
</button>
<button type="button"
class="btn btn-outline-secondary"
#click="$emit('select-all')">
<i class="fas fa-fw fa-check"></i> {{ Lang.get('media/item.index.list.multi-select.select-all') }}
</button>
</div>
<bulk-collection
#update-filters="doSomething"></bulk-collection>
<div class="clearfix"></div>
</div>
</template>
<script>
export default {
name: "Bulk",
props: {
multiselect: Boolean,
items: Array
},
components: {
'bulk-collection': () => import('./Collections')
},
methods: {
doSomething() {
console.log(this.items)
}
}
}
</script>
<style scoped>
</style>
list.js
import MediaItem from '../components/MediaItem';
import UploadModal from '../components/media/UploadModal';
import ItemDetail from '../components/media/ItemDetail';
import ShownResults from '../components/media/list/ShownResults';
import SearchBar from '../components/media/list/SearchBar';
import DocumentTypes from '../components/media/list/DocumentTypes';
import {default as CollectionDropdown} from '../components/media/list/Collections';
import Order from '../components/media/list/Order';
import BulkActions from '../components/media/list/BulkActions';
if (document.getElementById('media-list')) {
const mediaList = new Vue({
el: '#media-list',
components: {
MediaItem,
ShownResults,
SearchBar,
UploadModal,
ItemDetail,
DocumentTypes,
CollectionDropdown,
Order,
BulkActions
},
[...]
Collections.vue
<template>
<div class="dropdown float-left">
<button class="btn btn-secondary dropdown-toggle"
type="button"
data-toggle="dropdown">
{{ Lang.get('media/item.index.list.filters.collections.title') }}
</button>
<div class="dropdown-menu" ref="collectionDropdown">
<div class="dropdown-item no-pseudo">
<input type="search"
class="form-control"
name="search"
:placeholder="Lang.get('media/item.index.list.filters.collections.filter')"
v-model="query"
#keyup="search">
</div>
<div class="dropdown-item last-item no-pseudo">
<alert type="warning">
<template v-slot:body>
{{ Lang.get('media/item.index.list.filters.collections.none-filter') }}
</template>
</alert>
</div>
<div v-for="item in list"
class="dropdown-item"
v-if="!item.hidden">
<span class="custom-control custom-checkbox">
<input type="checkbox"
class="custom-control-input"
name="collection[]"
:checked="item.checked"
:id="item.slug"
:value="item.id"
#change="selectItem">
<label class="custom-control-label" :for="item.slug">
{{ item.name }}
</label>
</span>
</div>
</div>
</div>
</template>
<script>
import Alert from '../../partials/Alert';
export default {
name: "Collections",
components: {
Alert
},
data() {
return {
displayAmount: 10, // amount of items displayed without search
list: [],
query: ''
}
},
computed: {
/**
* Return an array of selected items only
*/
checked() {
return this.list.filter(item => {
return item.checked === true;
})
}
},
methods: {
/**
* Mark an item as selected
*/
selectItem(e) {
let selectedId = e.target.value;
this.markItem(selectedId);
},
/**
* Mark an item from the list as selected
*
* #param {Number} itemId
*/
markItem(itemId) {
this.list.forEach(item => {
if (item.id === parseInt(itemId)) {
item.checked = !item.checked;
}
});
this.$emit('update-filters', {
props: this.checked.map(item => item.id).join(',')
});
},
/**
* Search in the current URL for collection ids
*/
markItemsFromUrl() {
let urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('collection')) {
let urlFilters = urlParams.get('collection').split(','); // split url parameters
urlFilters.forEach(itemId => {
this.markItem(itemId);
});
}
},
},
mounted() {
this.fetchList();
this.markItemsFromUrl();
/**
* Prevent Bootstrap dropdown from closing after clicking inside it
*/
$(this.$refs.collectionDropdown).on('click.bs.dropdown', function (e) {
e.stopPropagation();
});
}
}
</script>
Below is a GIF animation to demonstrate the problem. The first dropdown (the one on the top) has normal behaviour. The second one (that appears later on) does not. When clicking the second one, an event of the first one is happening.
i am new to meteor, and i am trying to set a full calendar. i am using windows, and i did the meteor add fullcalendar:fullcalendar but I can't render the fullcalendar... i have read so many tutorials so far but still nothing. here is a sample of the code that im using.
I dont know if there is a way to check if the fullcalendar package did install in my app... or if I have to import it...
main.js
import { Template } from 'meteor/templating';
import { Notes } from '../lib/collections.js';
//import { fullCalendar} from 'fullcalendar';
//import { moment } from 'moment';
import './main.html';
Template.body.helpers({
/*
notes:[
{text: 'My note 1'},
{text: 'My note 2'},
{text: 'My note 3'}
]
*/
notes(){
return Notes.find({});
}
});
Template.add.events({
'submit .add-form': function(){
event.preventDefault();
//get input value
const target = event.target;
const text = target.text.value;
//insert note into collection
Notes.insert({
text,
createdAt: new Date()
});
//clear the form
target.text.value = '';
//close the modal
$('#modal1').modal('close');
return false;
}
});
Template.note.events({
'click .delete-note': function(){
Notes.remove(this._id);
return false;
}
});
Template.calendar.onRendered()({
$('#calendario').fullCalendar();
})
main.html
<head>
<title>note manager</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<nav class="red">
<div class="container">
<div class="nav-wrapper">
Danillo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="nav-item">
<a class="waves-effect waves-light btn modal-trigger" href="#modal1"> ADD Modal</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Nomes</h1>
<ul class="collection">
{{#each notes}}
{{> note}}
{{/each}}
</ul>
</div>
{{>add}}
{{>calendar}}
<script>
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</body>
<template name="note">
<li class="collection-item">
{{text}}
<i class="material-icons">close</i>
</li>
</template>
<template name="add">
<div id="modal1" class="modal">
<div class="modal-content">
<h3>Add Nome</h3>
<form class="add-form">
<input type="text" name="text" placeholder="Add Nome...">
</form>
</div>
</div>
</template>
<template name ="calendar">
<div class="container">
<div id="calendario">
</div>
</div>
</template>
thanks guys!
Inside
Template.TemplateName.rendered = function()
function you have to define all the things likes.eg-: eventRender,dayClick,eventAfterRender,viewRender,eventClick etc
sample code that I used inside Template.TemplateName.rendered = function()
$('#calendar').fullCalendar({
//height: "auto",
minTime: OpenTime,
maxTime: closeTime,
slotDuration: '00:15:00',
timezone: "Asia/Colombo",
allDaySlot:false,
dayOfMonthFormat: 'ddd - DD MMM',
defaultView: 'multiColAgendaDay',
views: {
multiColAgendaDay: {
// disabledColumns: [1],
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: 7,
columnHeaders: stylistDetails,
/* disabledColumns: [1] */
}
},
scrollTime: '09:00:00',
allDaySlot: false,
/* header: {
left: 'multiColAgendaDay',
center: 'title',
right: 'today prev,next'
}, */
header:false,
dayOfMonthFormat: 'ddd - DD MMM',
events( start, end, timezone, callback ) {
let filterBranchId = Session.get("filterBranchId");
let data = AppointmentsServices.find({branchId:filterBranchId,stylistDisabled: {$ne: true}}).fetch().map( ( event ) => {
return event;
});
so I was able to create a fullcalendar in my application, but now I cant make the events show... this is my code
main.js
import { Template } from 'meteor/templating';
import { Notes } from '../lib/collections.js';
import './main.html';
Template.body.helpers({
/*
notes:[
{text: 'My note 1'},
{text: 'My note 2'},
{text: 'My note 3'}
]
*/
notes(){
return Notes.find({});
}
});
Template.add.events({
'submit .add-form': function(){
event.preventDefault();
//get input value
const target = event.target;
const text = target.text.value;
//insert note into collection
Notes.insert({
text,
createdAt: new Date()
});
//clear the form
target.text.value = '';
//close the modal
$('#modal1').modal('close');
return false;
}
});
Template.note.events({
'click .delete-note': function(){
Notes.remove(this._id);
return false;
}
});
Template.note.helpers({
data:function(){
return moment(this.date).format("dddd, h:mm");
}
});
Template.example.helpers({
options: function() {
return {
defaultView: 'agendaDay',
};
},
events: function(){
return{
title : 'event2',
start : '2018-28-01',
allDay : false
}
}
});
main.html
<head>
<title>note manager</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<nav class="red">
<div class="container">
<div class="nav-wrapper">
Danillo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="nav-item">
<a class="waves-effect waves-light btn modal-trigger" href="#modal1"> ADD Modal</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Nomes</h1>
<ul class="collection">
{{#each notes}}
{{> note}}
{{/each}}
</ul>
</div>
<div class="container" id="container2">
{{> example}}
</div>
{{>add}}
<script>
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</body>
<template name="note">
<li class="collection-item">
{{text}} - {{data}}
<i class="material-icons">close</i>
</li>
</template>
<template name="add">
<div id="modal1" class="modal">
<div class="modal-content">
<h3>Add Nome</h3>
<form class="add-form">
<input type="text" name="text" placeholder="Add Nome...">
</form>
</div>
</div>
</template>
<template name="example">
{{>fullcalendar options}}
</template>
I have found some tutorials, even here, but they dont work, my goal is to pass the information from the form in my modal to the events of the fullcalendar. Thanks for your help guys.
Inside
Template.TemplateName.rendered = function()
function you have to define all the things likes.eg-: eventRender,dayClick,eventAfterRender,viewRender,eventClick etc
sample code that I used inside Template.TemplateName.rendered = function()
$('#calendar').fullCalendar({
//height: "auto",
minTime: OpenTime,
maxTime: closeTime,
slotDuration: '00:15:00',
timezone: "Asia/Colombo",
allDaySlot:false,
dayOfMonthFormat: 'ddd - DD MMM',
defaultView: 'multiColAgendaDay',
views: {
multiColAgendaDay: {
// disabledColumns: [1],
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: 7,
columnHeaders: stylistDetails,
/* disabledColumns: [1] */
}
},
scrollTime: '09:00:00',
allDaySlot: false,
/* header: {
left: 'multiColAgendaDay',
center: 'title',
right: 'today prev,next'
}, */
header:false,
dayOfMonthFormat: 'ddd - DD MMM',
events( start, end, timezone, callback ) {
let filterBranchId = Session.get("filterBranchId");
let data = AppointmentsServices.find({branchId:filterBranchId,stylistDisabled: {$ne: true}}).fetch().map( ( event ) => {
return event;
});
I am using vue.js to build a events management app. The problem is that I am unable to render the value of each event in the list group to the DOM. It just keeps rendering the curly braces expression to the DOM.
Here is the Js Fiddle :
https://jsfiddle.net/ufy01L3q/2/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>events Management</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://unpkg.com/vue"></script>
<!-- navigation bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand"><i class = ""></i> events Management </a>
</div>
</nav>
<!-- main body of our application -->
<div class="container" id="events">
<!-- add an event form -->
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Add an Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on="click: addEvent">Submit</button>
</div>
</div>
</div>
<!-- show the events -->
<div class="col-sm-6">
<div class="list-group">
<a href="#" class="list-group-item" v-repeat="event in events">
<h4 class="list-group-item-heading">
<i class="glyphicon glyphicon-bullhorn"></i>
{{ event.name }}
</h4>
<h5>
<i class="glyphicon glyphicon-calendar" v-if="event.date"></i>
{{ event.date }}
</h5>
<p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>
<button class="btn btn-xs btn-danger" v-on="click: deleteEvent($index)">Delete</button>
</a>
</div>
</div>
</div>
// app.js
<script>
new Vue({
// We want to target the div with an id of 'events'
el: '#events',
// Here we can register any values or collections that hold data
// for the application
data: {
event: {
name: '',
description: '',
date: ''
},
events: []
},
// Anything within the ready function will run when the application loads
ready: function() {
// When the application loads, we want to call the method that initializes
// some data
this.fetchEvents();
},
// Methods we want to use in our application are registered here
methods: {
// We dedicate a method to retrieving and setting some data
fetchEvents: function() {
var events = [{
id: 1,
name: 'TIFF',
description: 'Toronto International Film Festival',
date: '2015-09-10'
},
{
id: 2,
name: 'The Martian Premiere',
description: 'The Martian comes to theatres.',
date: '2015-10-02'
},
{
id: 3,
name: 'SXSW',
description: 'Music, film and interactive festival in Austin, TX.',
date: '2016-03-11'
}
];
// $set is a convenience method provided by Vue that is similar to pushing
// data onto an array
this.$set('events', events);
},
// Adds an event to the existing events array
addEvent: function() {
if (this.event.name) {
this.events.push(this.event);
this.event = {
name: '',
description: '',
date: ''
},
}
}
}
});
</script>
</body>
</html>
<!-- JS -->
Thank you in advance for the help.
First: you don't properly include Vue. Include it inside <head>, and in jsfiddle include just a script url, without tags.
Second: your event binding syntax is wrong: you're trying v-on="click: addEvent", but the proper syntax is v-on:click="addEvent($event)" - in this example you also pass $event to your method, and you an extract a value like this: $event.target.value.
I'm trying to get a modal to work with my ember application based on the example in this fiddle: http://jsfiddle.net/marciojunior/tK3rX/
However, the modal doesn't open and I am getting this error in my console:
Uncaught Error: Nothing handled the action 'showModal'.
Can anybody spot why? Here's my ModalView:
App.ModalView = Ember.View.extend({
templateName: "modal",
title: "",
content: "",
classNames: ["modal", "fade", "hide"],
didInsertElement: function() {
this.$().modal("show");
this.$().one("hidden", this._viewDidHide);
},
// modal dismissed by example clicked in X, make sure the modal view is destroyed
_viewDidHide: function() {
if (!this.isDestroyed) {
this.destroy();
}
},
// here we click in close button so _viewDidHide is called
close: function() {
this.$(".close").click();
}
});
And my subjectRoute which is supposed to handle the showModal event:
App.SubjectRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('subject', params.subject_id);
}
events: {
showModal: function() {
App.ModalView.create({ title: "Edit Subject", content: "My content" }).append();
}
}
});
This is my Subject template from within which I want to be able to open the modal (This is just to test if I can get it working, eventually the modal will be called from the edit button):
<script type = "text/x-handlebars" id = "subject">
{{#if deleteMode}}
<div class="confirm-box">
<h4>Really?</h4>
<button {{action "confirmDelete"}}> yes </button>
<button {{action "cancelDelete"}}> no </button>
</div>
{{/if}}
<h2>{{name}}</h2>
<button {{action "edit"}}>Edit</button>
<button {{action "delete"}}>Delete</button>
{{outlet}}
<a {{action showModal}} href="#">Open modal</a>
</script>
And my Modal View:
<script type="text/x-handlebars" data-template-name="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{view.title}}</h3>
</div>
<div class="modal-body">
<p>{{view.content}}</p>
</div>
<div class="modal-footer">
<a {{action close target="view"}} href="#" class="btn">Close</a>
Save changes
</div>
</script>
Thanks.
I updated the markup to reflect bootstrap v3.x and removed the hide value from the classNames array of ModalView.
http://emberjs.jsbin.com/IZavuVUM/2#subject
http://emberjs.jsbin.com/IZavuVUM/2/edit
hbs
<script type="text/x-handlebars" data-template-name="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{view.title}}</h4>
</div>
<div class="modal-body">
<p>{{view.content}}</p>
</div>
<div class="modal-footer">
<a {{action close target="view"}} href="#" class="btn btn-default">Close</a>
Save changes
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</script>
js
App = Ember.Application.create();
App.Router.map(function() {
this.route("subject");
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
App.ModalView = Ember.View.extend({
templateName: "modal",
title: "",
content: "",
classNames: ["modal", "fade"],
didInsertElement: function() {
this.$().modal("show");
this.$().one("hidden", this._viewDidHide);
},
// modal dismissed by example clicked in X, make sure the modal view is destroyed
_viewDidHide: function() {
if (!this.isDestroyed) {
this.destroy();
}
},
// here we click in close button so _viewDidHide is called
close: function() {
this.$(".close").click();
}
});
App.SubjectRoute = Ember.Route.extend({
model: function(params) {
return [];//this.store.find('subject', params.subject_id);
},
actions: {
showModal: function() {
App.ModalView.create({ title: "Edit Subject", content: "My content" }).append();
}
}
});