<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<div id="menu"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>
<script type="text/javascript">
var myView = Backbone.View.extend({
events: {
'click #menu': 'insideMenuHandler'
},
//for event click
initialize: function() {
_.bindAll(this, 'insideMenuHandler', 'outsideMenuHandler');
},
render: function() {
// Both <body> and <html> for paranoia.
$('body, html').on('click', this.outsideMenuHandler);
// ...
return this;
},
remove: function() {
// Clean up after ourselves.
$('body, html').off('click', this.outsideMenuHandler);
// ...
},
// ...
outsideMenuHandler: function(e) {
// ...
return false;
}
});
var v=new myView({el: '#view-goes-here'});
v.render();
</script>
</body>
</html>
Hey i am new to backbone.js and not understanding what is wrong in the code below, where do i change my code to make it working? Is there a problem with the bind function or something else is going wrong?
You're calling _.bindAll in the line
_.bindAll(this, 'insideMenuHandler', 'outsideMenuHandler');
but you don't have any function with name insideMenuHandler in the view.
Related
See example below and the TODO in the send function : How can I assign the label value in the global send function to dropboxController dropbox.label
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
window.onload=function() {
$('#AddIn').append("<div ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");
angular.module('dropboxApp', [])
.controller('dropboxController', function () {
var dropbox = this;
dropbox.label = "hello angular";
});
angular.bootstrap($('#AddIn'), ['dropboxApp']);
}
function send(label)
{
//TODO assign label value to dropboxController dropbox.label
}
</script>
</head>
<body>
<div id="AddIn"></div>
<button onclick="send('new label');">Send</button>
</body>
</html>
Use angular.element and get scope of specific dom element and apply label to it.
Change dropbox.label to $scope.label and inject $scope in controller because this and $scope are different. Check 'this' vs $scope in AngularJS controllers
Keep in Mind: Here I have used myDiv which has scope for angular and added id in append div line.
It's better to use ng-click instead of onclick if possible.
window.onload = function() {
$('#AddIn').append("<div id='myDiv' ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{label}}</div>");
angular.module('dropboxApp', [])
.controller('dropboxController', function($scope) {
var dropbox = this;
$scope.label = "hello angular";
});
angular.bootstrap($('#AddIn'), ['dropboxApp']);
}
function send(label) {
var scope = angular.element($("#myDiv")).scope();
scope.$apply(function() {
scope.label = label;
})
console.log(scope.label);
}
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="AddIn"></div>
<button id="myButton" onclick="send('new label');">Send</button>
</body>
</html>
html file:
<html ng-app="IDAddon" ng-csp>
<head>
<link rel="stylesheet" type="text/css" href="styles/angular-csp.css">
<script src="lib/angular.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="somepopup">
Delayed Message: {{textmessage}}
</div>
</body>
</html>
app.js script:
function MainController($scope, suggestionService) {
$scope.getMessage = function() {
window.addEventListener("message", function (){
$scope.$apply(function() {
$scope.textmessage = 'Fetched after 3 seconds';
});
} , false);
}
$scope.getMessage();
}
var IDmodule = angular.module('IDAddon', []).controller('MainCtrl', MainController)
I can confirm that the "message" event is received and the event handler function is called, but the page never gets updated with the message.
Am I missing anything here?
So I am helping to extend some functionality from an iOS app into a Parse/backbone style app. I am able to get information from the Parse database, but am having a difficult time understand how to render that with a view.
Here is the code I have so far
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/underscore.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.3.0.min.js"></script>
</head>
<body>
<div id="main">
<h1 id="actual_question"></h1>
<script type="text/template" id="question">
</script>
</div>
<script type="text/javascript">
Parse.initialize("hidden-for-security", "hidden-for-security");
var Question = Parse.Object.extend("Question");
var query = new Parse.Query(Question);
query.get("fhLIwu6zst", {
success: function (Question) {
var questionText = Question.get('questionText');
alert(questionText);
},
error: function (object, error) {
alert('terrible failure');
}
});
var questionView = Parse.View.extend({
el: '#actual_question',
initialize: function() {
this.render();
},
render: function() {
this.$el.html("something");
}
});
var questionView = new questionView({});
</script>
</body>
</html>
For the query the alert shows that I have successfully pulled that information from the database. Where I have "something" in the questionView i'd like to display that same query information but am having trouble with those. What am I missing?
Create your view with model.
var questionView = new questionView({
model: query
});
In your render method you should use some templating or whatever you want.
Read here about it.
render: function() {
var compiled = _.template("Id: <%= Id %>");
this.$el.html(compiled(this.model.toJSON()));
}
All,
Right now, I am learning AngularJS directive and for simple tryout purpose I wrote a small script which is:
<html ng-app="vp">
<head>
<title>try container</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
</head>
<body ng-controller="dashboard">
<testscope info="info.name"></testscope>
<script type="text/javascript" src="jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.15/angular-route.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("vp", []);
app.controller("dashboard",["$scope", function($scope){
$scope.info = {
name:"scope",
value:"scopevalue"
};
$scope.$on("showcontrollerscope", function(){
console.log("scope in controller:", $scope.info.name);
});
$scope.$watch("info", function(newn, oldn){
console.log("after change", $scope.info.name);
}, true);
}]);
app.directive("testscope", function(){
return {
restrict: "AE",
scope:{
info: "="
},
controller: function($scope, $element, $attrs){
console.log($scope);
$scope.$emit("showcontrollerscope");
$scope.info = "changed scope";
$scope.$emit("showcontrollerscope");
}
};
});
</script>
</body>
</html>
My question is why the $on outputs are both scope rather than scope and changed scope? like in $watch.
I originally think the $emit is asyn, but someone said it is sync
They are synchronous.
See also https://groups.google.com/d/msg/angular/yyH3FYAy5ZY/APANNMnolD8J
I found many people suggest not use $watch in controller, so how can I do this?
Thanks
I can't fire the click event on DOM element.
This is my js file: app.js. I'm pretty sure I'm missing something or doing wrong here but I can't figured out where.
var App = Backbone.View.extend({
el: $('body'),
initialize: function() {
_.bindAll(this, 'sayHello');
},
events: {
'click .link': 'sayHello'
},
sayHello: function(e) {
alert('Hello!');
}
});
var app = new App();
and this is my HTML file: index.htm.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<script type="text/javascript" src="assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="assets/js/underscore-min.js"></script>
<script type="text/javascript" src="assets/js/backbone-min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
</head>
<body>
Click here!
</body>
</html>
This was admittingly trickily. Think through the code logically. Your JS script is in your head.
The jQuery selector el: $('body') does not exist yet. (JavaScript executes immediately). Try doing el: 'body'.
You have to initialize your view on dom load event.
var App = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'sayHello'); // you don't need this for your code to work
},
events: {
'click .link': 'sayHello'
},
sayHello: function(e) {
alert('Hello!');
}
});
$(function(){
var app = new App({el: $("body")});
});