在knockout.js中默认选中复选框

我用代码创建了一个jsfiddle：http://jsfiddle.net/hw7c9b76/但不幸的是，它并没有真正显示问题，因为数据不是持久的。

当我在数据库中有几个条目并重新加载时，即使可编辑属性设置为false，也会选中所有复选框并显示应该隐藏的字段。

有没有办法确保在加载时隐藏字段并取消选中按钮？

这是html，因为stackoverflow不允许我在不包含代码的情况下发布jsfiddle链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Knockout experiment</title>
</head>
<body>
    <form data-bind="submit: addFriend">
        Add Friend: <input data-bind="value: newFriendNameText" placeholder="Name" /> <input data-bind="value: newFriendAgeText" placeholder="Age" />
        <button type="submit">Add</button>
    </form>
    <ul data-bind="foreach: friends">
        <li>
            <span data-bind="text:name"></span> 
            <span data-bind="text:age"></span>
            <input data-bind="visible: editable, textInput: name" />
            <input data-bind="visible: editable, textInput: age" />
            <a href="#" data-bind="visible: editable, click: $parent.updateFriend">Save Edits</a>
            <input type="checkbox" value="edit" data-bind="checked:editable">Make Edits</a>
            <a href="#" data-bind="click: $parent.removeFriend">Delete</a>
        </li>
    </ul>
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script src="knockout-mapping.js"></script>
    <script src="script.js"></script>
</body>
</html>

来自服务的数据不一致。返回可编辑的值时出现不一致

来自服务的数据

friends = [{"name":"aaad","age":"30","editable":"false","id":1},
               {"name":"ffff","age":"4","editable":"false","id":2},
               {"name":"werw","age":"3","editable":"false","id":3}];

数据应该是

friends = [{"name":"aaad","age":"30","editable":false,"id":1},
           {"name":"ffff","age":"4","editable":false,"id":2},
           {"name":"werw","age":"3","editable":false,"id":3}];

看看这个JS小提琴http://jsfiddle.net/Dnyanesh/k96tzdbz/（我已经复制了你的代码并做了一些更改）这把小提琴正在按预期工作。

现在，当可编辑的根本原因值不是false时，它将被视为true。因为javascript中没有类型安全性，所以您的值"false"也会被考虑，可编辑性也会被设置为true。

如果您无法控制来自所使用服务的数据，则可以始终将eidible值设置为false。我已经更新了fiddle的以下变化。http://jsfiddle.net/Dnyanesh/k96tzdbz/1/

        ko.utils.arrayForEach(friends, function(fr){
           var frdCls = new FriendClass(fr)
            self.friends.push(frdCls);
        });

在这种情况下，无论数据来自服务，它都将被设置为false。

相关内容

最新更新

热门标签：