I am started learning knockoutjs and I have faced an error. The Aptana editor shows an error at the:
data-bind: ....
property of the tag complaining that it is a proprietary tag. I have made sure to include all the needed javascript files plus I have checked a prior question:knockoutjs template not working.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='jquery-1.8.2.min.js'></script>
<script src='jquery.tmpl.min.js' type='text/javascript'></script>
<script src='knockout-2.2.0.js' type='text/javascript'></script>
</head>
<body>
<script>
function AppViewModel() {
this.firstName = "Bert";
this.lastName = "Bertington";
}
ko.applyBindings(new AppViewModel());
</script>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
</body>
</html>
Even after ignoring Aptana and hoping that the browser will show it I still get nothing. I am using Firefox 16 but I also tried on IE 8 but to no avail.
Move your script tag underneath your markup.
<body>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<script>
function AppViewModel() {
this.firstName = "Bert";
this.lastName = "Bertington";
}
ko.applyBindings(new AppViewModel());
</script>
</body>
Related
I am trying to trigger an event from an Ember.js controller. I throws an error saying "ember.min.js:3 Uncaught Error: Nothing handled the action 'clicked'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.". Also I am not clear on how the event system works on itself for the targeted action. C an someone help me with this. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Ember.js Application example</title>
<!-- CDN's -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="github-app">
</div>
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="col-md-12">
<h1>Hello from Ember!</h1>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<p>This is a github explorer for all the users.</p>
<ul>{{#each dev in controller}}
<li>{{dev}}</li>
{{/each}}
</ul>
<p>
<button class="btn btn-success" {{action "clicked"}}>Click Me</button>
</p>
<p>{{renderedOn}}</p>
</script>
<script type="text/javascript">
App = Ember.Application.create({
rootElement:"#github-app"
});
App.IndexRoute=Ember.Route.extend({
model:function(){
return [
"Sam",
"Sandy",
"Samudh"
];
}
});
App.IndexController = Ember.ArrayController.extend({
renderedOn : function(){
return new Date();
}.property(),
actions : {
clickMe(){
alert("I been clicked");
}
}
});
</script>
</body>
</html>
Also available at http://jsbin.com/cuxajiyuqa/edit?html,output
You don't have an action with the name 'clicked', and you tell your code to look for an action 'clicked' on clicking the button. Change
{{action "clicked"}}
into
{{action "clickMe"}}
or change the
clickMe(){
action into
clicked(){
and everything should be fine.
Check https://guides.emberjs.com/v2.4.0/templates/actions/ for the documentation on actions
How can i move the javascript code that's using knockout outside the html file? I want to create a separate file where everything is handled (or as much as possible). Also the templating should still work. Thanks in advance!
EDIT: Changes made. I have added the require.js in my Scripts folder and made an app.js and viewmodel.js file. But this still won't work. Any help would be very much appreciated :)
EDIT2: Almost there, Rumesh Eranga gave the right answer with using require.js. I only have a little problem left with my binding. 'data-bind="text: $(item.name)"' won't show the name, only '[object Object]'.
EDIT3: SOLVED!
This is the HTML file:
<head>
<script type="text/javascript" data-main="Script/app.js" src="Scripts/require.js"></script>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="Scripts/jquery.tmpl.js"></script>
<script id="shoppingItemTemplate" type="text/html">
<li><span data-bind="text: item.name"></span></li>
</script>
<div id="ActiveShoppingList">
<h2>Shopping items</h2>
<div id="ActiveList">
<ul data-bind="template: {name:'shoppingItemTemplate', foreach: items, as:'item'}"></ul>
<button data-bind="click:addItem">Add item</button>
</div>
</div>
</body>
Here is my Script/app.js:
require(['knockout-3.2.0', 'viewmodel'], function(ko, viewmodel) {
ko.applyBindings(new viewmodel);
});
And here is my Script/viewmodel.js:
define(['knockout-3.2.0'], function(ko) {
return function viewmodel (){
this.items = ko.observableArray([new item("item1"), new item("item2")]);
this.addItem = function()
{
this.items.push(new item("new item"));
};
};
function item(name)
{
return { name: ko.observable(name) };
}
});
Use Asynchronous Module Definition (AMD) With RequireJs.
Good article on Require and knockout can be found here.
Quoting from the site.
HTML
<html>
<head>
<script type="text/javascript" data-main="scripts/init.js" src="scripts/require.js"></script>
</head>
<body>
<p>First name: <input data-bind="value: firstName" /></p>
<p>First name capitalized: <strong data-bind="text: firstNameCaps"></strong></p>
</body>
</html>
scope/init.js
require(['knockout-x.y.z', 'appViewModel', 'domReady!'], function(ko, appViewModel) {
ko.applyBindings(new appViewModel());
});
scripts/appViewModel.js
// Main viewmodel class
define(['knockout-x.y.z'], function(ko) {
return function appViewModel() {
this.firstName = ko.observable('Bert');
this.firstNameCaps = ko.pureComputed(function() {
return this.firstName().toUpperCase();
}, this);
};
});
According to the code snippet given above you can see that you can make your view model code separate from the html and even can be modularize which is much helpful.
Trying to get a simple example with firebase and knockoutjs working. All i'm trying to do is take what is in firebase and bind it to my template in knockout. Sounds simple enough right? Well here is the code that's not working. I've looked it over but maybe I'm missing something. Oh this also makes use of knockoutfire.
<!DOCTYPE html>
<html>
<head>
<title>knockout</title>
</head>
<body>
<div id="viewModel">
<ul data-bind="foreach: chat">
<li data-bind="text: nick"></li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<script type="text/javascript" src="knockout.js"></script>
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
<script type="text/javascript" src='knockoutFire/knockoutFire.js'></script>
<script type="text/javascript" src='model.js'></script>
</body>
</html>
and the model.js:
var firebase = new Firebase("https://kingpinapp.firebaseio.com");
var viewModel = KnockoutFire.observable(firebase, {
chat: {
nick: true,
}
});
ko.applyBindings(viewModel, document.getElementById("viewModel"));
if I'm some how getting the model view wrong checkout the firebaseio link to see how the data is laid out. All I get when I visit index.html is a list with nothing in it. Just a bullet point, nothing else.
EDIT: just realised no one else can see my data. Well here is the JSON downloaded from the url:
{
"chat" : {
"nick" : "hello"
}
}
I think you must use with: chat instead of foreach: chat
<ul data-bind="with: chat">
If you need foreach binding, data in firebase look like;
{
"chat": {
"-XXX": {"nick": "hello"},
"-YYY": {"nick": "hi"}
}
}
and code:
var viewModel = KnockoutFire.observable(firebase, {
chat: {
"$chat": {
nick: true,
}
}
});
Am newbie in KnockoutJs, i tried all tutorials on its official website.
Now i want to run all the practical tutorial on my local machine, i have downloaded knockout-2.1.0.js.
I tried this code but its not working on local machine
index.php
---------
<!DOCTYPE html>
<html>
<head>
<title>Knockout</title>
<script src="js/knockout-2.1.0.js"></script>
<link rel="stylesheet" href="css/styles.css" />
<script>
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.myname= ko.observable("Frank");
this.myage= ko.observable("26");
this.mydetails= ko.computed(function() {
var x;
return this.myname() + ", and my age is " + this.myage() + 'yr. old.';
}, this);
this.capitalizeMyName = function() {
var currentVal = this.myname(); // Read the current value
this.myname(currentVal.toUpperCase()); // Write back a modified value
};
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
</script>
</head>
<body>
<p>New Application</p>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<p>My Name: <strong data-bind="text: myname"></strong></p>
<p>My Age: <strong data-bind="text: myage"></strong></p>
<p>My Name: <input data-bind="value: myname" /></p>
<p>My Age: <input data-bind="value: myage" /></p>
<p>Full Detalis: <strong>Hi, my name is <text data-bind="text: mydetails"></strong></p>
<button data-bind="click: capitalizeMyName">Go caps</button>
</body>
</html>
If Someone has knowledge or idea about this, then suggest me. Thanks!
http://code.jquery.com/jquery-1.7.2.min.js
you need to include Minified file : js/jquery-1.7.2.min.js
And put your viewmodel code between:
$(document).ready(function(){
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of
});
Tried to fiddle with knockoutjs for the first time, but can't get any examples to work:
What's wrong with this html page - it only displays "first name:" / "last name:" in my browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<title>Knockout demo</title>
<script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
function AppViewModel() {
this.firstName = "Helena";
this.lastName = "Christensen";
}
ko.applyBindings(new AppViewModel());
</script>
</head>
<body>
<div>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
</div>
</body>
</html>
The following will work:
<html>
<head runat="server">
<title>Knockout demo</title>
<script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<div>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
</div>
</body>
</html>
<script type="text/javascript">
function AppViewModel() {
this.firstName = "Helena";
this.lastName = "Christensen";
}
ko.applyBindings(new AppViewModel());
</script>
Move the script tag with the ViewModel and ko.appyBindings call to the bottom of your body.
Or you can use window.onload to trigger the binding process after browser window has loaded all elements:
<html>
<head runat="server">
<title>Knockout demo</title>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
function AppViewModel() {
this.firstName = "Helena";
this.lastName = "Christensen";
}
window.onload = function() {
ko.applyBindings(new AppViewModel());
};
</script>
</head>
<body>
<div>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
</div>
</body>
</html>