1

我在运行基本的 knockout.js 脚本时遇到了一些麻烦，我不确定是文件加载不正确还是另一个问题。

本质上，我只是想获得一个在 localhost 上工作的教程片段。我正在使用调用函数“名称”的 PHP。它应该做的就是显示 javascript 文件中列出的名称。教程可以在这里找到

//on name_test.php
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="name_test.js"></script>  //name_test.js is in the folder with all of my other files
</head>

//bunch of irrelevant code omitted

<?
function names(){
    ?>
    <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name: <strong data-bind="text: lastName"></strong></p>
    <?
}
?>

这是javascript文件

// name_test.js
function AppViewModel() {
  this.firstName = "first name here";
  this.lastName = "last name here";
}

ko.applyBindings(new AppViewModel());

现在当页面加载时我看到的是

First name:
Last name:

我在这里缺少什么吗？javascript 文件与我的所有其他文件位于目录中。我也尝试了整个路径（在 xampp 中），但它仍然没有显示任何内容。

4

3 回答 3

2

<script>标签在解析时执行。在您的applyBindings()函数运行时，DOM 尚未加载。您需要在 DOM 加载后（在脚本底部）运行它，或者通过运行它window.onload或类似 jQuery的方式运行它$(document).ready()。

// name_test.js
function AppViewModel() {
  this.firstName = "first name here";
  this.lastName = "last name here";
}

// Run after the window has loaded    
window.onload = function() {
  ko.applyBindings(new AppViewModel())
};

// Or if you are using jQuery
$(document).ready(function() {
  ko.applyBindings(new AppViewModel())
});

这记录在Knockout observables 文档中。

最后，您也可以将 移动<script src='name_test.js></script>到文档的末尾，它会在解析时加载，也就是在解析完 DOM 的其余部分之后。

于 2012-11-14T00:48:28.080 回答
1

有趣的是，对我来说它工作得很好：

HTML 文件：

  • 将脚本标签设置为底部
  • 删除了 PHP 代码

所以我们有：

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js">   </script>
<script src="name_test.js"></script>

JS 文件（未更改）：

function AppViewModel() {
  this.firstName = "first name here";
  this.lastName = "last name here";
}

ko.applyBindings(new AppViewModel());

当我使用 PHP 版本时它也可以工作（当然我在声明它之后调用 names() 函数，我假设你在上面的示例中忘记了这一点？）

<?php
function names(){
    ?>
    <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name: <strong data-bind="text: lastName"></strong></p>
    <?php
}
names();
?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="name_test.js"></script>

很抱歉，我无法为您提供更多帮助，但它对我有用。而且我没有使用任何库，只是您的脚本标签。

于 2012-11-14T01:12:05.830 回答
0 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

你好，你错过了http://

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
于 2012-11-14T00:42:20.143 回答