I am trying to create a modal view and have a base class that all modals need and then extending it for more specific functionality.
PlanSource.Modal = Ember.View.extend({
isShowing: false,
hide: function() {
this.set("isShowing", false);
},
close: function() {
this.set("isShowing", false);
},
show: function() {
this.set("isShowing", true);
}
});
PlanSource.AddJobModal = PlanSource.Modal.extend({
templateName: "modals/add_job",
createJob: function() {
var container = $("#new-job-name"),
name = container.val();
if (!name || name == "") return;
var job = PlanSource.Job.createRecord({
"name": name
});
job.save();
container.val("");
this.send("hide");
}
});
I render it with
{{view PlanSource.AddJobModal}}
And have the view template
<a class="button button-green" {{action show target=view}}>+ Add Job</a>
{{#if view.isShowing}}
<div class="modal-wrapper">
<div class="overlay"></div>
<div class="dialog box box-border">
<div class="header">
<p class="title">Enter a job name.</p>
</div>
<div class="body">
<p>Enter a name for your new job.</p>
<input type="text" id="new-job-name" placeholder="Job name">
</div>
<div class="footer">
<div class="buttons">
<a class="button button-blue" {{action createJob target=view}} >Create</a>
<a class="button" {{action close target=view}}>No</a>
</div>
</div>
</div>
</div>
{{/if}}
The problem is that when I click the button on the modal dialog, it gives me an "action createJob" can not be found. Am I extending the objects incorrectly because it works if I put the createJob in the base Modal class.
Fixed
There was an issue somewhere else in my code. The name got copied and so it was redefining it and making the method not exist.
Related
When I render my handlebars template in html, it looks like it's essentially skipping filling in the "handle bars" portion. I'm essentially printing messages with a title and content, and I'm using a "!each" helper to display all of my messages. I originally thought it was because it was because it was escaping the html around it, so I tried using a triple handle bar {{{ on each part however using the each helper with the triple stash gave me an error. Am I possibly using the handlebars incorrectly?
the typescript I used to render the HTML and my handlebars template is below:
public static refreshData(data: any) {
$("#indexMain").html(Handlebars.templates['main.hbs'](data));
//helper function for upvote button
Handlebars.registerHelper('getUButton', function (id) {
id = Handlebars.escapeExpression(id);
return new Handlebars.SafeString(
"<button type='button' class='btn btn-default up-button' id='u" + id + "'>Upvote</button>"
);
});
//helper function for downvote button
Handlebars.registerHelper("getDButton", function (id) {
id = Handlebars.escapeExpression(id);
return new Handlebars.SafeString(
"<button type='button' class='btn btn-default down-button' id='d" + id + "'>DownVote</button>"
);
});
// Grab the template script
var theTemplateScript = $("#main-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
//get messages from server and add them to the context
// This is the default context, which is passed to the template
var context = {
messages: data
}
console.log("context:")
console.log(context);
// Pass data to the template
var theCompiledHtml = theTemplate(context);
console.log(theCompiledHtml);
// Add the compiled html to the page
$("#messages-placeholder").html(theTemplate(context));
//add all click handlers
//get all buttons with id starting with u and set the click listerer
$(".up-button").click((event) => {
var id = $(event.target).attr("id").substring(1);
main.upvote(id)
});
//get all buttons with id starting with d and set the click listerer
$(".down-button").click((event) => {
var id = $(event.target).attr("id").substring(1);
main.downvote(id)
});
}
<script id="main-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Current Messages</h3>
</div>
<div class="panel-body">
<div class="list-group" id="message-list">
<!-- for each message, create a post for it with title, content, upvote count, and upvote button -->
{{#each messages}}
<li class="list-group-item">
<span class="badge">Vote Count: {{likeCount}}</span>
<h4 class="list-group-item-heading">{{title}}</h4>
<p class="list-group-item-text">{{content}}</p>
<div class="btn-group btn-group-xs" role="group" aria-label="upvote">
{{getUButton id}}
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="downvote">
{{getDButton id}}
</div>
</li>
{{/each}}
</div>
</div>
</div>
</script>
<div id="messages-placeholder"></div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Post New Message</h3>
</div>
<div class="input-group">
<span class="input-group-addon">Title</span>
<input id="newTitle" type="text" class="form-control" placeholder="Title" aria-describedby="newTitle">
</div>
<div class="input-group">
<span class="input-group-addon">Message</span>
<input id="newMessage" type="text" class="form-control" placeholder="Message" aria-describedby="newMessage">
</div>
<div class="btn-group" role="group" aria-label="create">
<button type="button" class="btn btn-default" id="postNewMessage">Post Message</button>
</div>
<span class="label label-danger" id="incompleteAcc"></span>
</div>
Okay, then it is likely the data provided to your template is not in the correct form. Here's a working snippet (with non-essentials stripped out). The data passed to your refreshData template must be an array. Make sure it isn't an object containing an array.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>
<script>
let refreshData = (data) => {
// Grab the template script
var theTemplateScript = $("#main-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
//get messages from server and add them to the context
// This is the default context, which is passed to the template
var context = {
messages: data
};
console.log("context:", context);
// Add the compiled html to the page
$("#messages-placeholder").html(theTemplate(context));
}
$(() => {
var data = [
{ likeCount: 3, title: 'My Title', content: 'Some content'},
{ likeCount: 0, title: 'My 2nd Title', content: 'Some other content'}
];
refreshData(data);
})
</script>
<script id="main-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Current Messages</h3>
</div>
<div class="panel-body">
<div class="list-group" id="message-list">
<!-- for each message, create a post for it with title, content, upvote count, and upvote button -->
{{#each messages}}
<li class="list-group-item">
<span class="badge">Vote Count: {{likeCount}}</span>
<h4 class="list-group-item-heading">{{title}}</h4>
<p class="list-group-item-text">{{content}}</p>
</li>
{{/each}}
</div>
</div>
</div>
</script>
<div id="messages-placeholder"></div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Post New Message</h3>
</div>
<div class="input-group">
<span class="input-group-addon">Title</span>
<input id="newTitle" type="text" class="form-control" placeholder="Title" aria-describedby="newTitle">
</div>
<div class="input-group">
<span class="input-group-addon">Message</span>
<input id="newMessage" type="text" class="form-control" placeholder="Message" aria-describedby="newMessage">
</div>
<div class="btn-group" role="group" aria-label="create">
<button type="button" class="btn btn-default" id="postNewMessage">Post Message</button>
</div>
<span class="label label-danger" id="incompleteAcc"></span>
</div>
</body>
</html>
When I am faced with issues like this, I eliminate different things until I either get clarity or something I removed fixes the problem. Now I have isolated where the problem lies. In your situation, the issue is likely the data being passed so verify that. Then try stripping out your helpers to see if they are causing issues.
I'm new to Ember.js and I'm trying to create an application that mimics Youtube by using their API. Currently I have a route that is responsible for grabbing the initial information from the Youtube Api to populate the page on load. I have a search bar component that is used to gather the input from the user and repopulate the list with results based on the string. The problem is that while I am getting the input from the user my Route model is not refreshing to grab the update data from the api. Below is my code.
Template for my video route video.hbs:
// app/templates/video.hbs
<div class="row">
{{search-bar}}
<div class="row">
<div class="col-md-12">
<hr>
<br>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
{{video-list model=model}}
<div class="col-md-4 pull-right video-container">
{{#if videoId}}
<iframe id="video-player" src="https://www.youtube.com/embed/{{videoId}}"></iframe>
{{else}}
<iframe id="video-player" src="https://www.youtube.com/embed/kEpOF7vUymc"></iframe>
{{/if}}
</div>
</div>
</div>
</div>
</div>
Template for my search bar
// app/templates/components/search-bar.hbs
<div class="col-md-12 col-md-offset-4">
<form class="form-inline">
<div class="form-group" onsubmit="return false">
{{input type="text" class="form-control" value=search id="search" placeholder="Search Videos..."}}
</div>
<button type="submit" {{action "updateSearch"}}class="btn btn-success">Search</button>
</form>
</div>
Component for my search bar
// app/components/search-bar.js
import Ember from 'ember';
export default Ember.Component.extend({
userSearch: "",
actions: {
updateSearch: function() {
this.set("userSearch", this.get("search"));
this.modelFor("videos").reload();
}
}
});
Video Route
// app/routes/video.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
var userSearch = this.get("search") === undefined ? "Code" : this.get("search");
this.set("search", userSearch);
var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&q="+ userSearch +"&maxResults=50&key="api key goes here";
return Ember.$.getJSON(url).then(function(data) {
return data.items.filter(function(vid) {
if(vid.id.videoId) {
return vid;
}
});
});
}
});
reload - will not call model hook method, in this case, you can send action to video route and try refresh from there.
EDIT:
Adjusting your code for your use case, Let me know if it's not working or anything wrong in this approach.
app/routes/video.js
Here we are using RSVP.hash function for returning multiple model. I am including userSearch too. Its better to implement query parameters for this use case, but I implemented it without using it.
import Ember from 'ember';
export default Ember.Route.extend({
userSearch: '',
model: function() {
var userSearch = this.get("userSearch") === undefined ? "Code" : this.get("userSearch");
var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + userSearch + "&maxResults=50&key=apikey";
return Ember.RSVP.hash({
videosList: Ember.$.getJSON(url).then(function(data) {
return data.items.filter(function(vid) {
if (vid.id.videoId) {
return vid;
}
});
}),
userSearch: userSearch
});
},
actions: {
refreshRoute(userSearch) {
this.set('userSearch',userSearch);
this.refresh();
},
}
});
app/controllers/viedo.js
It contains refreshRoute function and this will call refreshRoute function available in video route file.
import Ember from 'ember';
export default Ember.Controller.extend({
actions:{
refreshRoute(userSearch){
this.sendAction('refreshRoute',userSearch);
}
}
});
app/templates/video.hbs
1. I am passing userSearch property and refreshRoute action name to search-bar component
2. Accessing videosList using model.videosList
<div class="row">
{{search-bar userSearch=model.userSearch refreshRoute="refreshRoute"}}
<div class="row">
<div class="col-md-12">
<hr>
<br>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
{{video-list model=model.videosList}}
<div class="col-md-4 pull-right video-container">
{{#if videoId}}
<iframe id="video-player" src="https://www.youtube.com/embed/{{videoId}}"></iframe>
{{else}}
<iframe id="video-player" src="https://www.youtube.com/embed/kEpOF7vUymc"></iframe>
{{/if}}
</div>
</div>
</div>
</div>
</div>
app/components/search-bar.js
Here you will get userSearch property as external attributes ie. it will be passed as an argument on including the component.
import Ember from 'ember';
export default Ember.Component.extend({
userSearch:'',//external attributes
actions: {
updateSearch() {
var userSearch = this.get('userSearch');
this.sendAction('refreshRoute',userSearch); //this will call corresponding controller refreshRoute method
}
}
});
app/templates/components/search-bar.hbs
<div class="col-md-12 col-md-offset-4">
<form class="form-inline">
<div class="form-group" onsubmit="return false">
{{input type="text" class="form-control" value=userSearch id="search" placeholder="Search Videos..."}}
</div>
<button type="submit" {{action "updateSearch"}}class="btn btn-success">Search</button>
</form>
</div>
Note: Whole code can be found here:
https://github.com/Julian-Th/crowducate-platform/tree/feature/courseEditRights
The issue: I can't retrieve the {{this}} value with an event. Console.log() is printing 0.
My HTML:
<!-- Modal to control who can collaborate on a course-->
<template name="modalAddCollaborators">
<div id="modalAddCollaborators" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Manage Your Collaborators</h4>
</div>
<div class="modal-body">
<form class="form" role="form">
<ul class="list-group">
{{#each addedCollaborators}}
{{#each canEditCourse}}
<li class="list-group-item js-listed-collaborator">{{this}}<a title="Remove Collaborator" id="remove-collaborator" class="btn btn-danger pull-right" href="#"><i class="fa fa-trash"></i></a></li>
{{/each}}
{{/each}}
</ul>
<div class="form-group">
<input class="form-control typeahead" type="text" id="collaboratorName" placeholder="add a collaborator ..." data-source="courses" autocomplete="off" spellcheck="off">
<button type="button" id="js-addCollaborator" class="btn btn-success">Add</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
My JS:
Template.modalAddCollaborators.rendered = function() {
// initializes all typeahead instances
Meteor.typeahead.inject();
};
Template.modalAddCollaborators.courses = function(){
return Courses.find().fetch().map(function(it){ return it.author; });
//return users.find().fetch().map(function(it){ return it.username; });
};
Template.modalAddCollaborators.helpers({
'addedCollaborators': function () {
return Courses.find().fetch();
}
});
Template.modalAddCollaborators.events({
'click #js-addCollaborator' : function (event) {
var collaboratorName = $('#collaboratorName').val(); //
Courses.update(
{_id: this._id},
{$addToSet: {canEditCourse: collaboratorName}}
);
$('#collaboratorName').val("");
},
'click #remove-collaborator': function (event) {
var listedCollaborator = $('.js-listed-collaborator').val();
console.log(listedCollaborator);
Courses.update(
{_id: this._id },
{$pull: {canEditCourse: listedCollaborator}}
);
}
});
My MongoDB JSON:
{
"_id" : "j7A3tFdFBn5ECQGwe",
"title" : "Beatles",
"coverImageId" : "RERiadyMx8j8C9QQi",
"author" : "John",
"keywords" : [
"Paul"
],
"published" : "true",
"about" : "Testing the Course",
"canEditCourse" : [
"uo8SMdNroPGnxMoRg",
"FLhFJEczF4ak7CxqN",
"lkahdakjshdal",
"asödjaöslkdjalsöSA"
],
"createdById" : "uo8SMdNroPGnxMoRg",
"dateCreated" : ISODate("2015-12-28T16:30:34.714Z")
}
As seen in the JS-File, my final goal is to delete the clicked user from an array.
To get the text of the li item in the child link click event, combine the use of .parent() and .text() (since you can't use .val() on list items):
'click #remove-collaborator': function (event) {
console.log(event.target);
var listedCollaborator = $(event.currentTarget).parent().text();
console.log(listedCollaborator);
console.log(JSON.stringify(Template.parentData(0)));
Courses.update(
{
_id: Template.parentData(0)._id, /* or _id: Template.currentData()._id, */
canEditCourse: listedCollaborator
},
{ $pull: { canEditCourse: listedCollaborator } }
);
}
Notice you can use the current DOM element within the event bubbling phase through event.currentTarget to reference the element that kicked off the event. Since the element is the anchor tag, you get the li item as
its .parent(), and subsequently get its value with .text().
As for the update, use Template.parentData() to get the parent _id. Specify a parameter of 0 in the method which denotes the current data context level to look.
For example, Template.parentData(0) is equivalent to Template.currentData(). Template.parentData(2) is equivalent to {{../..}} in a template.
Since you've attached your event handler to the modalAddCollaborators template this will be the data context of that template which is nothing.
Just setup a nested template at the level you want to catch the event.
Furthermore with this pattern you can identify the _id of the collaborator directly, it will be this. The course _id however comes from the context of the parent template. (I'm not sure whether the course level data context is 1 or 2 levels higher however).
html:
{{#each canEditCourse}}
{{> nestedTemplate }}
{{/each}}
<template name="nestedTemplate">
<li class="list-group-item js-listed-collaborator">
{{this}}<a title="Remove Collaborator" id="remove-collaborator" class="btn btn-danger pull-right" href="#"><i class="fa fa-trash"></i></a>
</li>
</template>
js:
Template.nestedTemplate.events({
'click #remove-collaborator': function (event) {
Courses.update({_id: Template.parentData()._id },{$pull: {canEditCourse: this}});
}
});
I am very new to the smart table. I have gone through its documentation on Smart Table.
But the I haven't found how to bind data on click event in smart table?
Code is very big but I am trying to post it here.
<div class="table-scroll-x" st-table="backlinksData" st-safe-src="backlinks" st-set-filter="myStrictFilter">
<div class="crawlhealthshowcontent">
<div class="crawlhealthshowcontent-right">
<input type="text" class="crserachinput" placeholder="My URL" st-search="{{TargetUrl}}" />
<a class="bluebtn">Search</a>
</div>
<div class="clearfix"></div>
</div>
<br />
<div class="table-header clearfix">
<div class="row">
<div class="col-sm-6_5">
<div st-sort="SourceUrl" st-skip-natural="true">
Page URL
</div>
</div>
<div class="col-sm-2">
<div st-sort="SourceAnchor" st-skip-natural="true">
Anchor Text
</div>
</div>
<div class="col-sm-1">
<div st-sort="ExternalLinksCount" st-skip-natural="true">
External<br />Links
</div>
</div>
<div class="col-sm-1">
<div st-sort="InternalLinksCount" st-skip-natural="true">
Internal<br />Links
</div>
</div>
<div class="col-sm-1">
<div st-sort="IsFollow" st-skip-natural="true">
Type
</div>
</div>
</div>
</div>
<div class="table-body clearfix">
<div class="row" ng-repeat="backlink in backlinksData" ng-if="backlinks.length > 0">
<div class="col-sm-6_5">
<div class="pos-rel">
<span class="display-inline wrapWord" tool-tip="{{ backlink.SourceUrl }}"><b>Backlink source:</b> <a target="_blank" href="{{backlink.SourceUrl}}">{{ backlink.SourceUrl }}</a></span><br />
<span class="display-inline wrapWord" tool-tip="{{ backlink.SourceTitle }}"><b>Link description:</b> {{ backlink.SourceTitle }}</span> <br />
<span class="display-inline wrapWord" tool-tip="{{ backlink.TargetUrl }}"><b>My URL:</b> <a target="_blank" href="{{backlink.TargetUrl}}">{{ backlink.TargetUrl }}</a></span><br />
</div>
</div>
<div class="col-sm-2">
<div class="pos-rel">
{{ backlink.SourceAnchor }}
</div>
</div>
<div class="col-sm-1">
<div>
{{ backlink.ExternalLinksCount }}
</div>
</div>
<div class="col-sm-1">
<div>
{{ backlink.InternalLinksCount }}
</div>
</div>
<div class="col-sm-1">
<div ng-if="!backlink.IsFollow">
No Follow
</div>
</div>
</div>
<div class="row" ng-if="backlinks.length == 0">
No backlinks exists for selected location.
</div>
</div>
<div class="pos-rel" st-pagination="" st-displayed-pages="10" st-template="Home/PaginationCustom"></div>
</div>
and my js code is here.
module.controller('backlinksController', [
'$scope','$filter', 'mcatSharedDataService', 'globalVariables', 'backlinksService',
function ($scope,$filter, mcatSharedDataService, globalVariables, backlinksService) {
$scope.dataExistsValues = globalVariables.dataExistsValues;
var initialize = function () {
$scope.backlinks = undefined;
$scope.sortOrderAsc = true;
$scope.sortColumnIndex = 0;
};
initialize();
$scope.itemsByPage = 5;
var updateTableStartPage = function () {
// clear table before loading
$scope.backlinks = [];
// end clear table before loading
updateTableData();
};
var updateTableData = function () {
var property = mcatSharedDataService.PropertyDetails();
if (property == undefined || property.Primary == null || property.Primary == undefined || property.Primary.PropertyId <= 0) {
return;
}
var params = {
PropertyId: property.Primary.PropertyId
};
var backLinksDataPromise = backlinksService.getBackLinksData($scope, params);
$scope.Loading = backLinksDataPromise;
};
mcatSharedDataService.subscribeCustomerLocationsChanged($scope, updateTableStartPage);
}
]);
module.filter('myStrictFilter', function ($filter) {
return function (input, predicate) {
return $filter('filter')(input, predicate, true);
}
});
But It is working fine with the direct search on textbox.
but according to the requirement I have to perform it on button click.
Your suggestions and help would be appreciated.
Thanks in advance.
You can search for a specific row by making some simple tweaks.
add a filter to the ng-repeat, and filter it by a model that you will insert on the button click, like so: <tr ng-repeat="row in rowCollection | filter: searchQuery">
in your view, add that model (using ng-model) to an input tag and define it in your controller
then pass the value to the filter when you click the search button
here's a plunk that demonstrates this
you can use filter:searchQuery:true for strict search
EDIT:
OK, so OP's big problem was that the filtered values wouldn't show properly when paginated, the filter query is taken from an input box rather then using the de-facto st-search plug-in, So I referred to an already existing issue in github (similar), I've pulled out this plunk and modified it slightly to fit the questioned use case.
var LandingView = Backbone.View.extend({
initialize: function() {
console.log('Landing View has been initialized');
this.render();
},
template: Handlebars.compile($('#landingPage').html()),
render: function() {
this.$el.html(this.template);
},
events: {
// I want to render the subview on click
'click .btn-login' : 'renderlogin',
},
renderlogin: function() {
// Is this the right way to instantiate a subview?
var loginpage = new LoginView({ el: $('#modal-content') });
}
});
And my next view, which basically just empties the $('#modal-content') element...
var LoginView = Backbone.View.extend({
initialize: function() {
this.render();
console.log("login view initialized");
},
template: Handlebars.compile($('#loginPage').html()),
render: function() {
this.delegateEvents();
this.$el.html(this.template);
},
events: {
// this is where things get super confusing...
// Upon clicking, LoginView gets re-initialized and
// subsequent clicks are called for each number of times
// the view is initialized.
'click .js-btn-login' : 'login'
},
login: function(e) {
e.preventDefault();
var self = this;
console.log($(this.el).find('#userSignIn #userEmail').val());
console.log($(this.el).find('#userSignIn #userPassword').val());
}
});
My templates:
LANDING PAGE:
<script type="text/x-handlebars-template" id="landingPage">
<div>
<div class="auth-wrapper">
<div class="logo">
<img src="img/login/logo-landing.png"/>
</div>
<div class="to-auth-buttons-wrapper">
<a class="btn-to-auth btn-signup" href="#">Sign Up</a>
<a class="btn-to-auth btn-login" href="#">Log In</a>
</div>
</div>
</div>
</script>
LOGINPAGE:
<script type="text/x-handlebars-template" id="loginPage">
<div>
<div class="header">
Back
</div>
<div class="auth-wrapper">
<div class="logo">
<img src="img/login/logo-landing.png"/>
</div>
<form method="post" id="userSignIn">
<input class="form-control input-signin" type="text" name="useremail" placeholder="Email" id="userEmail" value="tester">
<input class="form-control input-signin" type="password" name="userpass" placeholder="Password" id="userPassword">
<button class="btn-to-auth btn-login js-btn-login">Log In</button>
</form>
</div>
</div>
</script>
My goal:
From within LandingView, upon clicking .btn-login, render LoginView.
From within LoginView, upon clicking .js-btn-login, console.log
contents of form
Problems:
In LoginView, upon clicking .js-btn-login, I see that the initialize function is called again.
In LoginView, I can't use jquery to get the values inside of $('#userSignIn #userEmail').val() and $('#userSignIn #userEmail').val() because they aren't there on render. I see the initial hardcoded value ( input[value="tester"]) but this is all it sees.
My question:
How do I get the view to stop reinitializing on an event firing and how do I get the values in my DOM after rendering?