Warm tip: This article is reproduced from serverfault.com, please click
javascript knockout.js

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

发布于 2020-12-07 11:57:48

I have a knockout observable array whose value assignment changes after a set value of time but do not see this reflecting in the view. Could someone tell where I am doing it wrong? I would expect the output to show

• GRE 1111 • TOEFL 111

but it shows

• GRE2 222 • TOEFL2 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>
Questioner
AMicrosoftVictim
Viewed
0
分享
adiga 2020-12-07 20:30:55

There are couple of issues here. As mentioned by you in the comments, you are not binding an object with observables. You are simply adding a global variable plans. If knockout can't find a property in the viewModel, it will use the window object's property. That's why it works the first time

  • You need to change viewModel as a constructor function and use new viewModel() to create an object or an instance.
  • observables should be read and updated by calling them as functions. So, this.plans(plans1). If you set this.plans = plans2, it will simply overwrite the observable with a simple array without the subscribers to update the UI when the property changes
  • You need to use correct this inside setTimeout. Either by creating a self = this variable outside or using an arrow function as a callback

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>

热门帖子

1
预算一万五攒个深度学习的主机，有好哥哥来看看配置吗
2
哀叹，头发越来越少了
3
[内购终身版限时免费][macOS] Barbee - 拯救你的菜单栏空间（刘海屏快来！
4
请教 mac 如何进行同 app 的窗口切换？
5
notion 是否有平替？
6
我又又又来求购 pixel 初代了。。。
7
领克 08 EM-P 和理想 L6 大伙觉得怎么选
8
[开发者自荐] 公众号封面神器——封面大师「Cover Master」(图片美化第二弹)
9
关于出镜旅游
10
原来凤凰系统已经倒闭 2 年多了

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections.
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models.
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc.
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System
8
lightweight, standalone C++ inference engine for Google's Gemma models.
9
📚 Freely available programming books
10
A collective list of free APIs
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
12
🎓 Path to a free self-taught education in Computer Science!
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.