敲除可观察数组绑定以在分配值没有发生延迟时查看

Question

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

• GRE 1111 • 托福 111

但显示

• GRE2 222 • 托福 22

jsFiddle link: 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()创建对象或实例
observables 应该 read and updated 通过调用它们作为函数。所以，this.plans(plans1)。如果你设置 this.plans = plans2，当属性改变
您需要在 setTimeout 中使用 correct this。通过在外部创建 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>

敲除可观察数组绑定以在分配值没有发生延迟时查看

knockout observable array binding to view when there is a delay in assigning value not happening

javascript

knockout.js