时间戳

首页 > 解决方案 > Knockout js在第二次绑定后保持显示/隐藏元素

knockout.js - Knockout js在第二次绑定后保持显示/隐藏元素

问题描述

我在 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);

标签： knockout.js

解决方案

不太确定第二次绑定是什么意思，但通常可以通过将 a 添加isVisible = ko.observable(true);到 Items 数组中的各个项目，然后在 html 中有以下内容来实现您所追求的。

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

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

推荐阅读