Firebase 和淘汰赛无法正常工作答案

【问题标题】：Firebase and knockout not working correctlyFirebase 和淘汰赛无法正常工作
【发布时间】：2013-04-21 05:27:53
【问题描述】：

试图获得一个使用 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 时，我得到的只是一个列表，其中没有任何内容。只是一个要点，没有别的。

编辑：刚刚意识到没有其他人可以看到我的数据。那么这里是从 url 下载的 JSON：

  {
  "chat" : {
    "nick" : "hello"
  }
}

【问题讨论】：

标签： javascript knockout.js firebase

【解决方案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,
    }
  }
});

【讨论】：