【发布时间】:2016-12-02 11:56:58
【问题描述】:
我有以下设置:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Barebones todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="./js/dist/fdb-all.min.js" type="text/javascript"></script>
<script src="./js/dist/fdb-autobind.min.js" type="text/javascript"></script>
<script src="scrypt.js" type="text/javascript"></script>
<script id="myLinkFragment" type="text/x-jsrender">
<li data-link="id{:_id}">{^{:name}}</li>
</script>
</head>
<body>
<form onsubmit="addGoal(); return false;">
<label for="goalinput">Enter goal:</label>
<input type="text" id="goalinput">
<input type="submit">
</form>
<button type="button" onclick="retrieve()">Retrieve</button>
<div id="p"></div>
<ul id="myList">
</ul>
</body>
</html>
还有我的 scrypt.js 文件:
var fdb = new ForerunnerDB();
var db = fdb.db("myDatabaseName");
var goalCollection = db.collection("goal");
function addGoal() {
console.log("addig goal...");
var newgoalname = document.getElementById("goalinput").value;
console.log(newgoalname);
goalCollection.insert({
name: newgoalname,
order: 99
});
};
function retrieve() {
var findings = goalCollection.find({});
console.log(findings);
document.getElementById("p").innerHTML = findings;
}
goalCollection.link("#myList", "#myLinkFragment");
然后我收到错误提示:
fdb-autobind.min.js:1 Uncaught ForerunnerDB [Collection]goal 无法将集合绑定到目标选择器“#myList”,因为它在 DOM 中不存在!
我不太明白这个问题,因为显然有一个 UL 标记,其 ID 为 myList。 我想也许 jquery 没有被正确调用,但我使用了记录的方式,所以它不应该是一个问题。我不知道可能导致问题的原因。
【问题讨论】:
-
我对 ForerunnerDB 不熟悉,但我认为您不会等到 DOM 完成加载。尝试将您的
<script>标签移动到<body>标签的末尾。 -
谢谢@Álvaro!它现在工作!我需要更好地理解这个 DOM 加载的东西。我会谷歌它。
-
这很简单:一旦
<script>标签加载,JavaScript 就会开始运行。如果它试图找到一个尚未加载的 HTML,它就找不到它。这就是像jQuery.ready()这样的东西试图解决的问题。
标签: javascript jquery forerunnerdb