I've started to work with Knockout.js and wanted to write some simple component, but the code I've written didn't display template's elements. I'm only seeing the text inside "h1" tag.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Component</title>
<script type="text/javascript" src="knockout-3.4.2.js"></script>
</head>
<body>
<h1>Counter starting at 1:</h1>
<counter params="initialCount: 1"></counter>
<script type="text/javascript">
function viewModel(params) {
const self = this;
self.count = ko.observable(params.initialCount);
self.increment = () => self.count(self.count() + 1);
}
const template =
`<div>
<span data-bind="text: count"></span>
<button type="button" data-bind="click: increment">
Increment
</button>
</div>`;
ko.components.register('counter', { viewModel, template });
</script>
</body>
</html>
What I'm doing wrong?
Try adding ko.applyBindings(); at the end of your script.
Related
I was working on something and doesn't quite get why this is not working.
I am trying to make a button that toggles between two dom elements.
My only guess would be that it is only changing the html client sided and pulling the class information from the server?
Thanks in advance
$(document).ready(function(){
$(".a").click(function(){
$(this).parent().html("<span class='b'>toggle down</span>");
});
$(".b").click(function(){
$(this).parent().html("<span class='a'>toggle up</span>");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span class="toggle">
<span class="a">toggle up</span>
</span>
</body>
</html>
When .a was clicked .b was injected as a brand new element to DOM. So,you need to declare the click event every time .b was injected.
$(document).ready(function(){
let toggleDown;
function toggleUp() {
$(".b").click(function(){
$(this).parent().html("<span class='a'>toggle up</span>");
toggleDown();
});
}
toggleDown = function() {
$(".a").click(function(){
$(this).parent().html("<span class='b'>toggle down</span>");
toggleUp();
});
}
toggleDown();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span class="toggle">
<span class="a">toggle up</span>
</span>
</body>
</html>
UPDATED
Here's a more appropriate approach.
$(document).ready(function(){
const a = "<span class='a'>toggle up</span>";
const b = "<span class='b'>toggle down</span>";
$('.toggle').click(function() {
let self = $(this);
const isA = self.children(":first").hasClass('a');
self.html(isA ? b : a);
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span class="toggle">
<span class="a">toggle up</span>
</span>
</body>
</html>
OR
You can use react.js or vue.js to acquire declarative approach.Currently you are using imperative approach. You can learn more at
https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2
This does not seems duplicate of
AngularJS access scope from outside js function, as I don't want this variable access on any click!
I have AngularJS code in my Maincontroller.js is
<div ng-controller = "Maincontroller">
$scope.name = "Hello";
</div>
In My main.HTML file, I have JavaScript code where I want this $scope.name value:
<html>
<script>
// But this seems not possible with {{ name}}
</script>
</html>
Is there any possibilities to access this $scope variable in JavaScript code?
Can you please check below code. What I did is I posted the name on the UI and with the help of id I fetched the value from the javascript code with the help of getElementById and innerHTML.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body >
<div ng-app="app" ng-controller="Maincontroller">
Angualr Scope: <h1 id="name">{{name}}</h1>
</div>
<div>
A button to call a function from simple javascript function: <button onclick="getData()">Get Data: </button>
</div>
<script src="../lib/angular.js"></script>
<script>
var getData = function(){
var name = document.getElementById('name');
console.log(name.innerHTML);
}
</script>
<script>
var app = angular.module('app', []);
app.controller('Maincontroller', function ($scope) {
$scope.name = "Hello";
});
</script>
</body>
</html>
I am new to angularjs in this angular code i want to increase the
value of the fib variable. For this i made a function named as fibapp
. here i have the html and angular code below please help to run it.
ang.js
`
var mod=angular.module("myModule",[]);
mod.controller("events",function($scope)
{
fib=0;
$scope.fib=fib;
$scope.fibapp=function(fib)
{
fib++;
}
}
);
`
HTML code using the Above angular code
`
<html>
<head>
<script src="E:/angular.min.js"></script>
<script src="E:/ang.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="events">
<p>{{fib}}</p>
<input type="button" ng-click="fibapp(fib)">
</div>
</body>
</html>
`
Use this:
var mod=angular.module("myModule",[]);
mod.controller("events",function($scope)
{
fib=0;
$scope.fib=fib;
$scope.fibapp=function(fib)
{
$scope.fib++;
}
}
Here is a jsfiddle
So currently I want to have my javascript in an attached JS file instead of using the 'OnClick' function attached to HTML objects. So far I've got:
<html>
<head>
</head>
<body>
<h1 id = '5' class = ''>6</h1>
<button id = '7' class = ''>8</button>
<script src = 'js/9.js'></script>
</body>
</html>
But unfortunately, I can't quite get the redirect going from clicking the button. It should have this source
document.getElementById('7').onclick = function () {
and then redirecting to a different page. Any tips on how I can improve this?
Please use strings as ID. I know you can now use numbers but it is not recommended
Use the load event handler
You MAY be submitting the page to itself when not giving the button a type so return false or preventDefault
what's with the spacing around = in the attributes? Not necessary nor recommended.
Like this
<html>
<head>
<script src="js/9.js"></script>
</head>
<body>
<h1 id="five" class="">6</h1>
<button id="seven" class="">8</button>
</body>
</html>
where js file has
window.onload=function() {
document.getElementById("seven").onclick = function () {
location.replace("page2.html"); // or just location="page2.html";
return false;
}
}
Using jQuery it would be
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/9.js"></script>
</head>
<body>
<h1 id="five" class="">6</h1>
<button id="seven" class="">8</button>
</body>
</html>
where js file has
$(function() {
$("#seven").on("click",function (e) {
e.preventDefault();
location.replace("page2.html"); // or just location="page2.html";
});
});
LASTLY you do not need script at all:
<form action="page2.html">
<button type="submit" id="seven" class="">8</button>
</form>
so I have a few links that have a class of 'button', and I am trying to get their text values with the jQuery .text() function, but it is returning nothing at the moment,
code:
$(document).ready(function() {
var tester = $('a.test').text();
alert(tester);
});
HTML:
<a class='test'>TEST</a>
any idea why this might not be working?
This code works, just try....
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a class="test">Test</a>
<p></p>
<script>
var string = $("a.test").text();
alert(string);
</script>
</body>
</html>