所以我有一个可以正常工作的 observablearray,但 UI 没有更新。我读过很多人遇到这种类型的问题,但我没有看到。
所以 HTML 是
<tbody data-bind="foreach: tweets">
<tr>
<td>
<span data-bind="visible: created_at" class="label label-success">Yup</span>
</td>
<td><p><b data-bind="text: screen_name"></b></p></td>
<td><p><b data-bind="text: id"></b></p></td>
<td><p data-bind="text: text"></p></td>
<td><p data-bind="text: created_at"></p></td>
</tr>
</tbody>
Javascript 是一个调用 API 并从中构建数组的函数。
<script type="text/javascript">
function TweetsViewModel() {
var self = this;
self.tasksURI = 'http://localhost:8000/api/v1/tweet/';
self.tweets = ko.observableArray();
self.ajax = function(uri, method, data) {
var request = {
url: uri,
type: method,
contentType: "application/json",
Accept: "application/json",
cache: false,
dataType: 'json',
data: JSON.stringify(data)
};
return $.ajax(request);
}
self.ajax(self.tasksURI, 'GET').done(function(data) {
for (var i = 0; i < data.objects.length; i++) {
var tweet = this;
tweet.created_at = ko.observable(data.objects[i].created_at)
tweet.text = ko.observable(data.objects[i].text)
tweet.id = ko.observable(data.objects[i].id)
tweet.screen_name = ko.observable(data.objects[i].twitteruser.screen_name)
self.tweets.push(tweet)
}
});
setTimeout(TweetsViewModel, 10000)
}
ko.applyBindings(new TweetsViewModel());
</script>
仅出于测试目的,我使用 setTimeout 重新运行对 API 的调用并更新数组。数组已正确更新,但 UI 未正确更新。我为我的无知道歉(长期以来一直是后端开发人员,这是我 10 年来第一次运行 Javascript)。非常感谢任何帮助!