I have a SPA using knockout JS for data binding and sammy for routing. I have a deck of cards that I am trying to have a dynamic routing to. My problem is that it doesn't work when I try to set a knockout observable from the routing function in sammy.
My HTML, where I try to bind the name of the deck, looks like this:
<!-- Create Deck -->
<div id="createDeck" class="page" style="display:none;">
<input type="text" class="form-control" placeholder="Untitled Deck..." data-bind="value: $root.deck.name" />
</div>
<script type="text/javascript" src="lib/jquery-1.9.1.js"></script>
<script type="text/javascript" src="lib/knockout-2.3.0.js"></script>
<script type="text/javascript" src="lib/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/sammy.js"></script>
<script type="text/javascript" src="js/Models/Deck.js"></script>
<script type="text/javascript" src="js/Models/Card.js"></script>
<script type="text/javascript" src="js/ViewModels/DeckViewModel.js"></script>
<script type="text/javascript" src="js/ViewModels/CardViewModel.js"></script>
<script type="text/javascript" src="js/routing.js"></script>
The Deck.js and DeckViewModel.js looks like below
function Deck(deckid, name, cards) {
var self = this;
self.id = deckid;
self.name = name;
self.cards = cards;
}
function DeckViewModel(deck, cards) {
var self = this;
self.deck = ko.observable(deck);
self.cards = ko.observableArray(cards);
self.goToCard = function (card) { location.hash = card.deckid + '/' + card.id };
}
// Bind
var element = $('#createDeck')[0];
var deckView = new DeckViewModel(null, null);
ko.applyBindings(deckView, element);
Finally, in my routing I try to create a new Deck, like this:
// Client-side routes
(function ($) {
var app = $.sammy('#content', function () {
this.get('#deck/:id', function (context) {
showPage("createDeck", ": Create Deck");
console.log(this.params.id);
deckView.deck = new Deck(1, "test", null);
console.log(deckView.deck);
});
});
$(function () {
app.run('#/');
});
})(jQuery);
function showPage(pageID, subHeader) {
// Hide all pages
$(".page").hide();
// Show the given page
$("#" + pageID).show();
// change the sub header
$("#subHeader").text(subHeader);
}
As you can see, I'm trying to create a test deck with the name 'test', but the binding <input type="text" class="form-control" placeholder="Untitled Deck..." data-bind="value: $root.deck.name" /> seems to bind the letter 'c'.
I'm at a loss, please help.
I tried to make a jsfiddle to demonstrate my problem
In your code the value assignment is not correct unless you are using Knockout-es5 plugin. here is the correct code
var app = $.sammy('#content', function () {
this.get('#deck/:id', function (context) {
showPage("createDeck", ": Create Deck");
console.log(this.params.id);
deckView.deck(new Deck(1, "test", null));
console.log(deckView.deck());
});
});
The way I've done this before is to define my Sammy() routes within the ViewModel. Shorter example for brevity:
(function($) {
function ViewModel() {
var self = this;
self.deckId = ko.observable(null);
Sammy(function() {
this.get('#/deck/:deckId', function(context) {
self.deckId(this.params.deckId);
});
});
}
$(function() {
ko.applyBindings(new ViewModel());
});
})(jQuery);
That way you can access your observables, etc, via self.
Related
Hello I am beginner in mean Stack. and I have data in localstorage and I want to fetch the data from the local storage and show in html file but I don't know How to get it. on the view file.
$scope.useredit = function (d) {
var user_id = d._id;
var dataToModify;
angular.forEach($scope.dp, function (value, key) {
if (user_id == value._id) {
dataToModify = value;
$localStorage.userData = dataToModify;
console.log($localStorage.userData.name);
$location.path('/useredit');
}
});
}
when I type localStorage; into console it show
ngStorage-userData
:
"{
"_id":"5846692617e0575c0e0c2211",
"password":123456,
"email":"montyy1981#gmail.com",
"name":"digvijay12","__v":0
}"
How to get it value into the view file.I used like
<div>{{userData.email}}</div>
But it is not showing data.please help me how to fetch localstorage data and show into view file.
You can use core concept without ngStorage....
https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
localStorage.setItem("userData", $scope.Data);
$scope.storageData = localStorage.getItem("userData");
<p>{{storageData.email}}</p>
How to get the localStoragedata anywhere this is very simple we have to pass localStorage data into the controller global variable suppose
we have the data into localstorage
$scope.useredit = function (d) {
var user_id = d._id;
var dataToModify;
angular.forEach($scope.dp, function (value, key) {
if (user_id == value._id) {
dataToModify = value;
$localStorage.userData = dataToModify;
console.log($localStorage.userData.name);
$location.path('/useredit');
}
});
}
we have to define pass $localStorage.userData into the other variable after controller start.
app.controller("usercontroller",function($scope,$http, $localStorage,$location){
$scope.registeruser = $localStorage.userData;
$scope.useredit = function (d) {
var user_id = d._id;
var dataToModify;
angular.forEach($scope.dp, function (value, key) {
if (user_id == value._id) {
dataToModify = value;
$localStorage.userData = dataToModify;
console.log($localStorage.userData.name);
$location.path('/useredit');
}
});
}
});
For better understanding click this DEMO
In the controller you need to inject "ngStorage" angular.module('MyApp', ["ngStorage"]).
And add the dependency script link <script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
HTML
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MyController">
<input type="button" value = "Save" ng-click = "Save()" />
<input type="button" value = "Get" ng-click = "Get()" />
</div>
</body>
</html>
Script.js
var app = angular.module('MyApp', ["ngStorage"])
app.controller('MyController', function ($scope, $localStorage, $sessionStorage, $window) {
$scope.Save = function () {
$localStorage.email = "xyz#gmail.com";
}
$scope.Get = function () {
$window.alert($localStorage.email);
}
});
Hope it will be usefull for you.
I'm a newbie in Javascript and Angular JS programming and I'm trying to make a currency converter using Yahoo Finance API, but also I want to input directly the initial value in the script without clicking the button or pressing enter, so i figured that using Angular JS would be great. But it doesn't work properly and I think the problem might be in function calculate($scope). Please, can you help me?
<html ng-app>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function httpGet(theUrl)
{
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
function currencyConverter(currency_from,currency_to,currency_input){
var yql_base_url = "https://query.yahooapis.com/v1/public/yql";
var yql_query = 'select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20("'+currency_from+currency_to+'")';
var yql_query_url = yql_base_url + "?q=" + yql_query + "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
var http_response = httpGet(yql_query_url);
var http_response_json = JSON.parse(http_response);
return http_response_json.query.results.rate.Rate;
}
//The problem starts here?
function calculate($scope)
{
$scope.total= function(){
var currency_from = "USD";
var currency_to = "INR";
var rate = currencyConverter(currency_from,currency_to,$scope.currency_input);
return rate;
};
}
</script>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller="calculate">
<div style="float:left;">
<form>
<input type="text" ng-model="currency_input" value="0"/> =
</form>
</div>
<div style="float:left">
{{total()}}
</div>
</div>
<div style="clear: both;"></div>
</body>
</html>
There are a few erros in your code using AngularJS. You forgot to start your application module and add a controller.
I made a few corrections and I tested, it is working:
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<div style="float:left;">
<form>
<input type="text" ng-model="currency_input" ng-change="total()" value="0"/> =
</form>
</div>
<div style="float:left">
{{ rate }}
</div>
</div>
<div style="clear: both;"></div>
<script>
angular.module('app', [])
.controller('MyController', function($scope, $http) {
function currencyConverter(currency_from,currency_to) {
var yql_base_url = "https://query.yahooapis.com/v1/public/yql";
var yql_query = 'select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20("'+currency_from+currency_to+'")';
var yql_query_url = yql_base_url + "?q=" + yql_query + "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$http.get(yql_query_url).then(function(response) {
$scope.rate = $scope.currency_input*response.data.query.results.rate.Rate;
});
}
$scope.total = function() {
var currency_from = "USD";
var currency_to = "INR";
currencyConverter(currency_from, currency_to);
};
});
</script>
</body>
</html>
I don't recommend you to use jquery to make http calls. Use $http instead!
One problem, which should be the first to be corrected and go from there, is that you are referencing an angular concept $scope in your scripts before you actually declare the angular library.
To correct this, move your angular library script tag up above your other script tag (but below the jquery script tag.
You should take a look at services (https://docs.angularjs.org/guide/services).
With that you can just create a service and put all of your 'Yahoo' related functions in one place. Then just inject it into your directive/controller.
ex:
.service('yahooRelatedLogicSrvc', function () {
return {
httpGet: function httpGet(theUrl) {
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
}
})
.controller('sampleCtrl', function ($scope, yahooRelatedLogicSrvc) {
var url = 'http://yahoo.com';
$scope.httpGet = yahooRelatedLogicStvc.httpGet(url);
}
And you can just put returns of your service functions as $scope properties etc.
I really can see why you should use in line javascript in that scenario.
Angular makes something like this much easier than what you're attempting. There's an $http service for performing a GET, for one, so you can leave out jquery and create something much simpler like ConverterService in my example.
Since your input is bound to a scope variable, you don't need to set value="0", simply set $scope.currency_input to your default value in your controller. I created a convert function on the scope, which will update the output whenever its called. It's called once at the bottom of the controller, but could be bound to a button in your html by simply doing something like this: <button ng-click="convert()">Convert value</button>
var app = angular.module('calc', []);
app.controller('MainCtrl', function($scope, ConverterService) {
// default your currency input
$scope.currency_input = 10;
var currency_from = "USD";
var currency_to = "INR";
$scope.convert = function() {
ConverterService.getConversions(currency_from, currency_to)
.then(function(response) {
// put your logic to convert the value here
var convertedVal = null; // = $scope.currency_input * response.something etc...
$scope.result = convertedVal;
});
};
$scope.convert();// run once when the controller loads to get defaulted input conversion
});
app.factory('ConverterService', function($http) {
return {
getConversions: function(from, to, val) {
var endpoint = ''; // build your endpoint here
return $http.get(endpoint);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="calc">
<div ng-controller="MainCtrl">
<input type="text" ng-model="currency_input">= {{result}}
</div>
</html>
I am trying to learn to use Knockoutjs but I am facing a problem
this is the scenario:
I have a page where I define a Knockoutjs viewModel as follow
$(document).ready(function () {
var viewModel = {
selectedColumns: ko.observableArray()
};
ko.applyBindings(viewModel);
});
Now with an Ajax request I add to the page a checkbox which I want to bind to the viewModel
<input type='checkbox' id='someId' data-bind='attr: { value: 'someValue' }, checked: $root.selectedColumns'>
$(document).ready(function() {
ko.applyBindings(viewModel, document.getElementById(someId));
});
but I always get
Error: ReferenceError: viewModel is not defined
Source File: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
I've created a test page where everything is on one page and it works
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="../../Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var count = 0;
var viewModel = {
selectedPeople: ko.observableArray()
};
$(document).ready(function () {
ko.applyBindings(viewModel);
});
function AddAnotherCheckbox(){
var id = "checkbox" + count;
var checknox = count + " <input type='checkbox' id='" + id + "' data-bind='attr: { value: \"" + count + "\" }, checked: $root.selectedPeople'><br/>";
$("#container").append(checknox);
count++;
$(document).ready(function() {
ko.applyBindings(viewModel, document.getElementById(id));
});
}
</script>
</head>
<body>
<input type="button" onclick="AddAnotherCheckbox()"/>
<div id="container"></div>
<br/>
<br/>
<br/>
<span data-bind="text: selectedPeople"></span>
</body>
</html>
But I can't make it working using partial view
Could you explain to me what's the problem and how can I solve it?
thanks
Description
This is not about Knockout, it's about JavaScript in general.
Your Testcode works because you have defined the viewModel outside of $(document).ready
This is a other scope.
Compare theese to jsFiddles
This does not work (your scenario)
This works
Sample
This does not work
$(document).ready(function () {
var viewModel = {
someThing : "Test"
};
});
$(document).ready(function () {
alert(viewModel.someThing);
});
This will work
var viewModel;
$(document).ready(function () {
viewModel = {
someThing : "Test"
};
});
$(document).ready(function () {
alert(viewModel.someThing);
});
More Information
Explaining JavaScript Scope And Closures
<head>
<title></title>
<script src="javascript/vendor/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="javascript/vendor/underscore.js" type="text/javascript"></script>
<script src="javascript/vendor/backbone.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" >
var MyApp = (function(_, Backbone){
var myApp = {};
var initializers = [];
myApp.addInitializer = function(callback){
var initializer = {
obj: this,
callback: callback
}
initializers.push(initializer);
};
myApp.initialize= function(){
_.each(initializers, function(initializer){
initializer.callback.call(initializer.obj);
});
};
// the event aggregator
myApp.vent = _.extend({}, Backbone.Events);
// the other app initialization code ...
return myApp;
})(_, Backbone);
var MyModule = (function(MyApp, Backbone){
var MyView = Backbone.View.extend({
initialize: function(){
MyApp.bind("some:event", this.someCallback, this);
},
someCallback: function(){
alert("I'm Doing Stuff!!!");
}
});
// ... other code, including MyApp.addInitializer
})(MyApp, Backbone);
var AnotherModule = (function (MyApp, Backbone) {
var anotherModule = {};
anotherModule.SomeFunction = function () {
MyApp.trigger("some:event");
//alert("Hello");
};
return anotherModule;
})(MyApp, Backbone);
// kick it all off and show the alert box
//$(function(){
// MyApp.initialize();
// AnotherModule.SomeFunction();
//});
$(function () {
MyApp.initialize();
AnotherModule.SomeFunction();
});
</script>
</body>
I am getting error on this line MyApp.trigger("some:event"); . I copied the code from following link
URL: http://lostechies.com/derickbailey/2011/11/17/introduction-to-composite-javascript-apps/
Can you help me using modules two or more and each of them have multiple views. I need to communicate them using backbone as the above URL did.
Thanks.
I tried to solve this in different ways but kept ending up with the following solution. The solution involves writing my code in modules and using marionette modules and vent to communicate with them. Marionette helped me a lot and I hope the different features further in my development.
index.html
<script type="text/javascript">
$(function () {
//var myModule = MyApp.module("MyModule");
// console.log(MyApp.MyModule.someData); //=> public data
MyApp.OrganizerModule.someFunction(); //=> public data
//var LayOutModel = new MyApp.ShellModule.LayOut();
var LayoutView = new MyApp.ShellModule.LayoutView();
LayoutView.render();
var Explorer = new MyApp.OrganizerModule.ExplorerView();
});
</script>
The following templates are used:
<script id="layout_temp" type="text/template">
<div id="layout">
<div id="header">
header
</div>
<div id="container">
<div id="center" class="column">
center
</div>
<div id="left" class="column">
left
</div>
<div id="right" class="column">
right
</div>
</div>
<div id="footer">
footer
</div>
</div>
</script>
<script id="Explorer" type="text/template">
<div > start :
<button>Say hello</button>
</div>
</script>
Here is the Module definition and the subscription of the event using Marionette
MyApp.module("ShellModule", function (ShellModule, MyApp, Backbone, Marionette, $, _) {
ShellModule.LayoutView = Backbone.View.extend({
initialize: function () {
//Backbone.ModelBinding.call(this);
alert("Hello2");
MyApp.vent.on("toolClick_Event", function (cat) {
alert("test toolClick_Event fired");
});
}
// , events: {
// 'toolClick_Event': 'toolClick_Event'
// }
, render: function () {
var template = _.template($("#layout_temp").html(), {});
$("#Maincontainer").html(template);
//$(this.el).append("<ul> <li>hello world</li> </ul>");
}
});
});
And the other Module that triggers the event using MyApp.vent.trigger.
MyApp.module("OrganizerModule", function (OrganizerModule, MyApp, Backbone, Marionette, $, _) {
// Private Data And Functions
// --------------------------
var myData = "this is private data";
var myFunction = function () {
console.log(myData);
}
// Public Data And Functions
// -------------------------
OrganizerModule.someData = "public data";
OrganizerModule.someFunction = function () {
//console.log(MyModule.someData);
alert(OrganizerModule.someData);
}
OrganizerModule.ExplorerView = Backbone.View.extend({
el: "#center",
events: {
'click button': 'toolClick'
}
, initialize: function () {
this.render();
this.setElement(this.el);
}
, render: function () {
var template = _.template($("#Explorer").html(), {});
//this.$el.html.add(template);
// $("#center").append(template);
//return this.el;
$(this.el).html(template);
return this;
}
, toolClick: function () {
alert("test toolClick");
// var template = _.template($("#Explorer").html(), {});
//$("#center").append(template);
MyApp.vent.trigger('toolClick_Event');
$("#Maincontainer").append("<div> other data </div>");
}
});
});
Hope this will be helpful to others.
A sample bit of code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<div id="myinfo">info</div>
<input id="clickme" type="button" value="click here to display info"/>
<script type="text/javascript">
function Fighter() {
this.name = "Kenny"; // fighters name
this.hp = 10; // fighters hp
this.getHP = function() {
return this.hp;
}
this.getName = function() {
return this.name;
}
this.initUpdateButton = function(button_id) {
$(button_id).click(function() {
$("#myinfo").html("Name: "+this.getName()+"<br/>HP:"+this.getHP());
// this.getName is undefined
});
}
};
var me = new Fighter();
alert("Name: "+me.getName()+"<br/>HP:"+me.getHP()); // works properly
me.initUpdateButton("#clickme"); // bind it to some ID
</script>
Simply put, given a JavaScript class with JQuery mixed in, I understand that on the callback for JQuery functions (i.e. $.click()), that this is referring to the object that was clicked and Not the Class or root function(). so this.getName() and this.getHP() don't work.
But what is the best way to get around this problem?
I saw some similar posts but they weren't of use to me so sorry if this is a repost and thanks in advance.
this.initUpdateButton = function(button_id) {
var self = this;
$(button_id).click(function() {
$("#myinfo").html("Name: "+self.getName()+"<br/>HP:"+self.getHP());
});
}