{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 戒情不戒烟 的问题《Based on the first knockout tutorial, why is my co》','https://www.manongdao.com/q-807447.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I understand how the tutorial works on the page, but I'm trying to set one up locally to create a calculator and can't get knockout.js to work. It doesn't initialize or populate like the knockout.js online tutorial.
HTML
<html>
<head>
<script type="text/javascript" language="javascript" src="../knockout-2.1.0.js"></script>
<script type="text/JavaScript" language="javascript">
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
</script>
</head>
<body class="calc" onLoad="createnav()">
<div id="all">
<div id="calc">
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
</div>
<div id="info">
<!-- outputs will be here -->
</div>
</div>
</body>
</html>
I'm using knockout.js version 2.1.0. As for location of the src it is correct.
Folder Structure
----------
| Root |
----------_____________________
| |
------------------- ------------ ---------------
| knockout-2.1.0.js | | pphcalc | ___ | HeroPilot.asp |
------------------- ------------ ---------------
Any suggestions?
You are applying the bindings in a header script tag so there are not yet any elements to bind to at the point that your ko.applyBindings(new AppViewModel()) line runs.
You can provide a callback for the JQuery Window.load function to ensure that everything is properly loaded before the bindings get applied. Example:
If you're not using jquery, don't load it specially for this. Instead you can activate knockout on window.onload. Example:
Wrap your ko.applyBindings call in a function:
Pass the name of your "start" function to window.onload. Note, don't add the () to the function name. This prevents the function executing immediately, and instead ensures it is called as a callback function when the window is loaded.