当赋值未发生延迟时，将可观察数组绑定到视图中

Question

我有一个淘汰可观察数组，其值分配在设定的时间值后发生变化，但在视图中看不到这一点。有人能告诉我哪里做错了吗？我希望输出显示

• GRE 1111 • 托福 111

但它表明

• GRE2 222 • 托福2 22

jsFiddle 链接： https: //jsfiddle.net/4r37x9y5/

HTML：

console.clear();

function viewModel() { 

this.plans = ko.observableArray([]);

    

    var plans1 = [

        { id: 'GRE', count: '1111' },

        { id: 'TOEFL', count: '111' },

        ];

        

            var plans2 = [

        { id: 'GRE2', count: '222' },

        { id: 'TOEFL2', count: '22' },

        ];

        

        this.plans = plans2;

        //this.plans = plans1;

        

        setTimeout(function(){

        console.log("In timeout before assigning plans");

      this.plans = plans1;

      console.log(this.plans);

      }, 2000);     

}

ko.applyBindings(viewModel());

// The above line equals:

// viewModel(); // updates window object and returns null!

// ko.applyBindings(); // binds window object to body!

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="panel panel-default">

    <ul data-bind="foreach: plans" class="list-group">

        <li class="list-group-item">

            <span data-bind="text: id"></span>

            <span data-bind="text: count"></span>

        </li>

    </ul>

</div>

Answer 1

这里有几个问题。正如您在评论中提到的，您没有将对象与可观察对象绑定。您只需添加一个全局变量plans。如果knockout在viewModel中找不到属性，它将使用window对象的属性。这就是为什么它第一次起作用您需要更改viewModel为构造函数并用于new viewModel()创建对象或实例。应该通过将可观察量作为函数调用来读取和更新它们。所以，this.plans(plans1). 如果您设置this.plans = plans2，它将简单地用一个简单的数组覆盖可观察的内容，而无需订阅者在属性更改时更新 UI您需要在里面使用正确的thissetTimeout。通过self = this在外部创建变量或使用箭头函数作为回调function viewModel() {  this.plans = ko.observableArray([]);    var plans1 = [{ id: "GRE", count: "1" }, { id: "TOEFL", count: "1" }];  var plans2 = [{ id: "GRE2", count: "2" }, { id: "TOEFL2", count: "2" }];  this.plans(plans2) // call it like a function  setTimeout(() => {    console.log("In timeout before assigning plans");    this.plans(plans1)  }, 2000);}ko.applyBindings(new viewModel()); // new keyword to create an object<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script><ul data-bind="foreach: plans">  <li>    <span data-bind="text: id"></span>    <span data-bind="text: count"></span>  </li></ul>