尝试使用firebase和knockoutjs工作的简单示例。我所要做的就是拿出firebase中的内容并将其绑定到我的模板中。听起来很简单吧?那么这里的代码是行不通的。我看了一下,但也许我错过了什么。哦,这也使用了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>
和model.js:
var firebase = new Firebase("https://kingpinapp.firebaseio.com");
var viewModel = KnockoutFire.observable(firebase, {
chat: {
nick: true,
}
});
ko.applyBindings(viewModel, document.getElementById("viewModel"));
如果我是一些如何让模型视图错误检查firebaseio链接以查看数据的布局方式。我访问index.html时得到的只是一个没有任何内容的列表。只是一个要点,没有别的。
编辑:刚认识到没有其他人可以看到我的数据。那么这里是从网址下载的JSON: {
"chat" : {
"nick" : "hello"
}
}
答案 0 :(得分:1)
我认为您必须使用with: chat
代替foreach: chat
<ul data-bind="with: chat">
如果你需要foreach
绑定,firebase中的数据看起来像;
{
"chat": {
"-XXX": {"nick": "hello"},
"-YYY": {"nick": "hi"}
}
}
和代码:
var viewModel = KnockoutFire.observable(firebase, {
chat: {
"$chat": {
nick: true,
}
}
});