Question

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

基本上我只是想获得一个教程片段来处理localhost。我正在使用调用函数“names”的PHP。它应该做的只是显示javascript文件中列出的名称。可以找到该教程here

//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中）并且它仍然没有显示任何内容。

Answer 1

<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 documentation中记录了这一点。

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

Answer 2

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

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-File（未更改）：

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>

对不起，我不能再帮助你，但它对我有用。我没有使用任何库，只使用脚本标签。

Answer 3

<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>

javascript文件没有加载或其他一些问题？

3 个答案: