gpt4 book ai didi

javascript - knockout 中数据数组的变化没有反射(reflect)到 UI 上?

转载 作者:行者123 更新时间:2023-12-02 17:33:56 25 4
gpt4 key购买 nike

AM 正在开发一个简单的 knockout 应用程序。能够成功地将数据绑定(bind)到 View 层。然而,在更改按钮单击事件的数据数组时,这些值不会反射(reflect)到 View 层上。

以下是我的代码:

<!Doctype HTML>
<html>
<head>
<script src="knockout-3.1.0.js"></script>
<script>
/*Sample data array that will have the changing values*/
var sampledata = [{ title1:"abc",title2:"abc2" },
{title1:"def",title2:"ghi"}];

/*View model that is used for binding*/
function sampleViewModel() {
var self=this;
self.sampledata2 = ko.observableArray(sampledata);
}

var my = { viewModel: new sampleViewModel() };

/*Applying bindings using knockout*/
function initialize() {
ko.applyBindings(my.viewModel);
}

/*Changing values for the onclick of the button*/
function changevalues(){
my.viewModel.sampledata2([{ title1:"zzz1",title2:"yyy1" }, {title1:"zzz2",title2:"yyy2"}]);

}

</script>
</head>
<body>


<div id="frame" data-bind="foreach: sampledata">


<!-- Displays the "title" field. -->
<h4 id="duration" data-bind="text: title1"></h4>
<h4 id="time" data-bind="text: title2"></h4>

</div>
<button id="clickme">Click me to change the data values</button>

<script>
document.getElementById('clickme').addEventListener('click',changevalues,false);

initialize();
</script>

</body>
</html>

我想知道如何更改按钮单击事件的数据数组的值。我知道这与 ko.observableArray() 有关。但我怀疑这会使实际逻辑变得复杂。如果有人可以提供相同的解决方案,那就太好了。

最佳答案

您需要将 self.sampledata2 设为可观察数组。

self.sampledata2 = ko.observableArray(sampledata);

您需要将 View 模型存储在变量中(假设为 viewModel),然后按如下方式更新它:

viewModel.sampledata2([{ title1:"zzz1",title2:"yyy1" }, {title1:"zzz2",title2:"yyy2"}]);

不要直接更改样本数据。

关于javascript - knockout 中数据数组的变化没有反射(reflect)到 UI 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22804493/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com