Javascript 淘汰ObservalArray不更新HTML Foreach

因此，我有一个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>

函数TweetsViewModel（）{
var self=这个；
self.tasksURIhttp://localhost:8000/api/v1/tweet/';
self.tweets=ko.observearray（）；
self.ajax=函数（uri、方法、数据）{
var请求={
url:uri，
类型：方法，
contentType:“应用程序/json”，
接受：“应用程序/json”，
cache:false，
数据类型：“json”，
数据：JSON.stringify（数据）
};
返回$.ajax（请求）；
}
self.ajax（self.tasksURI，'GET'）.done（函数（数据）{
对于（var i=0；i

---

出于测试目的，我使用setTimeout来重新运行对API的调用并更新数组。数组得到了正确的更新，但UI没有。我为我的无知道歉（长期以来一直是后端开发人员，这是我10年来第一次运行Javascript）。非常感谢任何帮助

问题是您从未更新observableArray

首先，您再次调用构造函数，但是

this

引用可能没有指向您认为的对象。再次调用

TweetsViewModel

构造函数（在

setTimeout

调用中）时，

此

引用将指向

窗口

对象

即使您获得指向正确对象的

this

引用（这可以使用函数所具有的

apply

方法实现，但这并不重要），您仍然不会更新ObservalArray，因为您会将

self.tweets

变量设置为行上的新ObservalArray

self.tweets = ko.observableArray();

所有订阅（例如UI DOM元素）仍将订阅旧的ObservalArray，因为它们不知道变量已更改

因此，您可能应该创建一个函数来执行数据的重新加载，如下所示：

self.reloadData = function(){
    self.ajax(self.tasksURI, 'GET').done(function(data) {
        for (var i = 0; i < data.objects.length; i++) {
            // Important: Create a new tweet object instead of using 'this' here.
            var tweet = {};
            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(self.reloadData, 10000);

self.reloadData=function（）{
self.ajax（self.tasksURI，'GET'）.done（函数（数据）{
对于（var i=0；i

---

另外，请注意，这将始终向ObserverArray添加推文（从不清除它），并且它将导致ObserverArray的订阅在每次添加推文时触发一次。如果您想替换数组，您可能应该创建一个替换数组，将tweets推入该数组，最后通过执行

self.tweets（replacementary）替换ObservalArray中的数组
谢谢。我以为可能是那样的，但没看到。这就把事情弄清楚了。我真的很感激你花时间用线索棒打我。