Knockout js在第二次绑定后继续显示/隐藏元素

Posted 2021-05-05

我在knockout.js中有以下代码，并在点击div元素时使用javascript我隐藏它。但是在ajax请求之后的第二个绑定中div再次显示。

<div id="myrootDiv">
    <!-- ko foreach: Items -->
    <div class="myclass" data-bind="html: myData"></div>
    <!-- /ko -->
</div>

javascript代码

$("#myrootDiv").on("click",".myclass",function (){
$(this).toggle(); 
});

我将如何记住每个绑定的可见性？我打电话的时候

ko.mapping.fromJS(jsonData,{}, myVM);

所有div元素都会再次显示。如何保持它们对用户选择的依赖性。这是我的查看代码

    var ViewModel = function() {};
    var myVM = new ViewModel('myrootDiv');

var tempjson={"items":[{"id":"1","myData":"test data1"},{"id":"2","myData":"test data2"},{"id":"3","myData":"test data3"}]};

    var jsonData =$.parseJSON(tempjson);
    ko.mapping.fromJS(jsonData,{}, myVM);
    ko.applyBindings(myVM,document.getElementById('myrootDiv'));

以及我做的ajax成功

ko.mapping.fromJS(jsonData,{}, myVM);

答案

不太确定你的意思是第二个绑定，但通常你可以通过在items数组中的各个项目中添加一个isVisible = ko.observable(true);来实现，然后在html中有以下内容。

<!-- ko foreach: Items -->
<div data-bind="html: myData, visible: isVisible">
</div>
<!-- /ko -->

isVisibile属性会跟踪项目是否可见。在代码中，您可以根据需要为每个项目打开或关闭可见性。