Although I have searched for I could not find an answer. Any duplicate links are welcome.
I am trying to render a Backbone View from an html template.
I am using require.js and its text.js plugin.
While I can gather the template and can pass it into the callback I use in requiring my view at entry point main.js;
I cannot render it to populate a desired html element in my index_app.html
file, the place I want to place the text from my template is #form-login.
What am I missing? Is it related to my dom selectors?
Here how it looks.
index_app.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="../lib/ratchet/css/ratchet.css" rel="stylesheet">
<script data-main="main" src="../lib/require/require.js"></script>
</head>
<body>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content" id="cont">
<div id="form_login">
</div>
</div>
</body>
</html>
main.js:
require.config({
paths: {
backbone: '../lib/backbone/backbone-min',
jquery: '../lib/jquery/jquery-1.11.1.min',
ratchet: '../lib/ratchet/js/ratchet',
text: '../lib/require/text',
underscore: '../lib/underscore/underscore-min',
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
}
});
require(['views/login'], function(LoginView){
var loginView = new LoginView();
});
/views/login:
define([
'jquery',
'underscore',
'backbone',
'text!templates/login.html'
], function($, _, Backbone, LoginTmpl){
var LoginView = new Backbone.View.extend({
el: $("#cont"),
template: _.template(LoginTmpl),
initialize: function(){
this.render();
},
render: function() {
this.$("#form_login").html(this.template);
return this;
}
});
//alert(LoginTmpl);
return LoginView;
});
/templates/login.html:
<div class="card">
<form method="POST" action="/login">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="password">
<ul class="table-view">
<li class="table-view-cell">
Remember me
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<button class="btn btn-primary btn-block">Login</button>
</form>
</div>
my directory tree:
/site
-/lib/
...
-/src/
-index_app.html
-main.js
-collections/
-views/
-login.js
-templates/
-login.html
-models/
In your "/views/login"
var LoginView = new Backbone.View.extend({
should be
var LoginView = Backbone.View.extend({
(without the new)
Related
I hope you can help me out or give me a hint to solve my problem.
I am making an app using angularjs and material design lite (css and js).
My problem is that the material design js file doesn't take affect on the partials once the state changes and basically I lost all the functionality that material design library provides me.
this is my code so far
index.html
<!doctype html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appy2go</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<!-- Material Design Lite -->
<script src="dist/js/material.min.js"></script>
<link rel="stylesheet" href="dist/css/material.pink-blue.min.css">
<!-- <script src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> -->
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="app.js"></script>
<script src="modules/home/home.js"></script>
<script src="modules/signin/signin.js"></script>
<link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
<div id="app-wrapper" ui-view></div>
<!--THIS BUTTON WORKS AS SUPPOSED TO BE-->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</body>
</html>
app.js
angular.module('app',[
'ui.router',
'app.home',
'app.signin'
])
.config(function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
})
.controller('AppController',function($scope){
console.log("ready");
})
home module
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div> <!-- IT SHOULD DISPLAY AN ICON ON SMALL DEVICES -->
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">App Name</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">App Name</span>
<nav class="mdl-navigation">
link 1
link 2
link 3
</nav>
</div>
<main class="mdl-layout__content">
<div>Content</div>
<!-- Colored FAB button with ripple -->
<!-- Accent-colored raised button with ripple -->
<!-- THIS BUTTON DOESN'T WORK AS SUPPOSED TO BE -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">Appy2go</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</div>
home.js
angular.module('app.home',[
'ui.router'
])
.config(function($stateProvider){
$stateProvider.state('home',{
url:'/',
controller: 'HomeController',
templateUrl: 'modules/home/home.html',
})
})
.controller('HomeController',function($scope,$http){
console.log("Ready");
})
Angular has to know when to look for changes in the variables. If you have non-angular code changing things then you have to tell angular to rerun the digest cycle.
Here's an example where I wrapped the jQuery Dialog function in Angular. I'm having to manually tell Angular to WATCH and APPLY.
app.directive("dialog", function() {
return {
restrict: 'A',
scope: {
dialog:"=",
},
controller: function($scope) {
$scope.$watch("dialog", function(){
if($scope.dialog){
$scope.open();
}else{
$scope.close();
}
});
},
link: {
pre: function(scope, element, attributes) {
scope.open = function() {
element.dialog({
height: attributes.height,
width: attributes.width
});
};
scope.close = function() {
element.dialog("close");
};
},
post: function(scope, element, attributes) {
scope.open();
element.on("dialogclose", function(){
if(scope.dialog){
scope.dialog = false;
scope.$apply();
}
});
}
},
};
});
Rest of the code is here.
https://plnkr.co/edit/myBzYyL2BHOP8CtRpqrr?p=info
Your routing code should be in the first module which is the main module. I feel that's where your problem is, I am not on a PC right now to be able to replicate your code and test. But change that first.
in my main page i have a tabstrip which it's tab items loaded dynamically.but angularjs does not load related controller for tabitem.
my code is something like this:
var tabStripElement = $("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fade"
}
},
dataTextField: 'text',
dataContentField: 'content',
dataImageUrlField: 'dataImageUrl',
dataUrlField: 'url',
dataContentUrlField: 'contentUrl',
});
tabStripElement.parent().attr("id", "tabstrip-parent");
var tabStrip = tabStripElement.data("kendoTabStrip");
angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
$scope.openTab()
{
tabStrip.append({
text: 'Title',
contentUrl: '/tabItem.html',
encoded: false
});
}
}])
.controller('TabController', ['$scope', function($scope){
}])
MainPage:
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<link href="~/Content/kendo/2016.1/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2016.1/kendo.default.min.css" rel="stylesheet" />
</head>
<body ng-controller="MainController">
<div id="tabstrip" class="text-right">
</div>
<script src="~/Scripts/lib/jquery/jquery-1.12.0.js"></script>
<script src="~/Scripts/lib/angular/angular.js"></script>
<script src="~/Scripts/lib/angular/angular-resource.js"></script>
<script src="~/Scripts/lib/kendo/2016.1/kendo.all.min.js"></script>
<script src="~/Scripts/js/app.js"></script>
<script src="~/Scripts/js/controllers.js"></script>
</body>
</html>
and view for tab is something like this:
<div ng-controller="TabController">
<input type="text" />
</div>
I'm trying to get the Animsition plugin working in an Angular project.
The loader is stuck and the view doesn't load.
The jQuery plugin is in a directive, and works as separate HTML files without Angular routing. But I want to get it to work WITH Angular Router.
// In the directive, defaults were:
loadingParentElement : 'body',
overlayParentElement : 'body',
(and it worked fine without router + separate full html files with head/body/script tags to sources. But as separate views, I changed each view to have parent main elements, assuming they acted as parent body elements. But still didn't work.
app.js
var app = angular.module('MyApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'AppCtrl',
})
.when('/work', {
templateUrl: 'partials/work.html',
controller: 'AppCtrl',
})
.otherwise({
redirectTo: '/'
});
});
// the directive
app.directive('ngAnimsition', [function() {
return {
restrict: 'A',
scope: {
'model': '='
},
link: function(scope, elem, attrs) {
var $animsition = $(elem);
$animsition.animsition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
loading: true,
loadingParentElement: 'main', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'main',
transition: function(url) {
window.location.href = url;
}
});
}
}
}]);
index.html file
<!DOCTYPE html>
<html class="no-js" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Getting Animsition jQuery + Angular Router</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="js/animsition/animsition.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-controller="AppCtrl">
<!-- ng-router -->
<div ng-view></div>
<!-- tried below, but only does animsition on first load, not changing between views -->
<!-- <div ng-animsition class="animsition">
<!-- <div ng-view></div>
<!-- </div>
<!-- jquery -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/animsition/jquery.animsition.min.js"></script>
<!-- Angular -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-router.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Partial home.html
<main>
<div ng-animsition class="row container animsition">
<nav>
<a ng-href="#/" class="active animsition-link">Home</a>
<a ng-href="#/work" class="animsition-link">Work</a>
</nav>
<div>
<h1>Home</h1>
</div>
</div>
</main>
Partial work.html
<main>
<div ng-animsition class="row container animsition">
<nav>
<a ng-href="#/" class="animsition-link">Home</a>
<a ng-href="#/work" class="active animsition-link">Work</a>
</nav>
<div>
<h1>Work</h1>
</div>
</div>
</main>
I got this problem also, and i make it work by using this code, you can tried it
transition: function(url){
if(url){
window.location.href = url;
}
else{
location.reload();
}
}
I'm trying to add a bootstrap DateRangePicker on my header template for Angular UI-Grid. I can see that the template is working properly because it shows the Bootstrap Icon. I do not want to use the native angular Type:'date'. I want to use a bootstrap date picker.
I have all the includes needed for this to show up.
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
This is my Template HTML
<!-- DatePickerTemplate HTML -->
<script type="text/ng-template" id="DatePickerTemplate.html">
<div ng-controller="DatePickerController">
<div>Sent On</div>
<div class="input-group date" datepicker-popup is-open="true"
ng-model="COL_FIELD" min-date="2010-01-01">
<input class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</script>
This is my UI Grid columnDefinitons:
{ name: 'Sent On', field: 'SentDateTime', enableCellEdit: false,
allowCellFocus: false, type: 'date', cellFilter: 'date:"M-d-yy H:mm"',
headerCellTemplate: 'DatePickerTemplate.html' }
This is my Directive
app.directive("filterDatePicker", function(){
return {
restrict: 'E',
scope: true,
templateUrl: 'DatePickerTemplate.html'
};
});
I have an empty controller at the moment, what I want to do in the controller is get the dates I pick from the BootStrap DateRangePicker once it's working
Controller
app.controller('DatePickerController', [
'$scope', function($scope) {
// return date picked from bootstrap datepicker
}
]);
When I click on the little menu box it doesn't do anything. I'm not getting any errors in the developer console either.
Here is a Plunker, you can see both Date columns, one on the left is native the one on the right should be bootstrap which is not working.
Can someone please give me an idea of where I'm going wrong. I can't get the BootStrap DatePicker to open. I really want to add a DateRangePicker not just a regular Bootstrap Date Picker.
Date Filter Plunker
It works, using the latest versions of Angular (1.5.0), UI-Bootstrap (1.1.2) and UI-Grid (3.1.1) with correction of some mistakes you made. You forgot to inject the ui.bootstrap module into your application and you didn't add the uib-datepicker-popup directive to your HTML input element. Also you haven got direct access to scope from a custom template. You need to prefix grid.appScope to every property/method you want to access in your controller scope:
You can use grid.appScope in your row template to access elements in your controller's scope.
http://ui-grid.info/docs/#/tutorial/317_custom_templates
Otherwise it "works", at least thus far that the popup opens on tab and when you click the button but it won't overlap the headercell which can possibly be solved with CSS, but i'll leave that to you to figure out. Hope this helps. Good luck with your project. Here's a working snippet:
angular.module('App', [
'ui.bootstrap',
'ui.grid'
]);
angular.module('App').controller('Controller', [
'$scope',
function ($scope) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [{
field: 'date',
filterHeaderTemplate: 'DatePicker.html'
}]
};
$scope.datePicker = {
opened: false,
open: function () {
$scope.datePicker.opened = true;
}
};
}
]);
#grid {
width: 100%;
height: 250px;
}
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>Angular 1.5.0</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.css" />
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.js"></script>
<script type="text/ng-template" id="DatePicker.html">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="grid.appScope.datePicker.value" is-open="grid.appScope.datePicker.opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="grid.appScope.datePicker.open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</script>
</head>
<body ng-controller="Controller">
<div id="grid" ui-grid="gridOptions"></div>
</body>
</html>
I am using the ngModal modal dialog box directive for my angular application. It's displaying some weird behavior that I don't quite understand. When I attach variables directly to the controller's $scope and reference them in the dialog box, the binding breaks. Changing their values in the dialog has no effect on the variables in the controller. But if I add the variables as properties to an object and then add the object to the $scope it works. In other words, if I do this
$scope.v1 = 1
$scope.v2 = 'abc'
it doesn't work, but if I do
$scope.myData = {
v1: 1,
v2: 'abc'
}
things work fine. What's the deal? You can see a working version of the code here and a broken version here.
If the plunk apps aren't loading for you, here is the code:
html
<!DOCTYPE html>
<html data-ng-app='ngModalDemo'>
<head>
<title>ngQuickDate Demo</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ng-modal.css" media="all" />
<style type='text/css'>
body{font-family:'Helvetica Neue',Helvetica,sans-serif}
h1 { padding: 0; margin: 0; }
.ng-cloak { display: none; }
</style>
</head>
<body>
<div ng-controller='DemoController'>
<modal-dialog show='myData.modalShown' width='500px' dialog-title='Modal Dialog Title' on-close='logClose()'>
<p>This is some html content</p>
<p>
<label for='hello'>Hello:</label>
<input type='text' name='hello' ng-model='myData.hello' />
</p>
<p>
<label for='foo'>Foo:</label>
<input type='text' name='foo' ng-model='myData.foo' />
</p>
<img src='http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg' width='300px'/>
</modal-dialog>
<button ng-click='toggleModal()'>Toggle Modal</button>
<br/>
<br/>
<br/>
<p><strong>Shown?</strong> {{myData.modalShown}}</p>
<p><strong>Hello</strong>: {{myData.hello}}</p>
<p><strong>Foo</strong>: {{myData.foo}}</p>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script type="text/javascript" src="ng-modal.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</body>
</html>
angular app
app.config(function(ngModalDefaultsProvider) {
return ngModalDefaultsProvider.set({
closeButtonHtml: "<i class='fa fa-times'></i>"
});
});
angular controller
app = angular.module('ngModalDemo')
app.controller('DemoController', function($scope) {
$scope.myData = {
link: "http://google.com",
modalShown: false,
hello: 'world',
foo: 'bar'
}
$scope.logClose = function() {
console.log('close!');
};
$scope.toggleModal = function() {
$scope.myData.modalShown = !$scope.myData.modalShown;
};
});