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

Question

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

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

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

这是 html，因为 Whosebug 不允许我只 post 一个没有包含代码的 jsfiddle link：

<!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>

Answer 1

您的服务数据不一致。不一致是在返回可编辑的值时

来自服务的数据

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 fiddle http://jsfiddle.net/Dnyanesh/k96tzdbz/（我已经复制了你的代码并做了一些更改） fiddle 按预期工作。

现在，除了 false 之外，什么是可编辑的根本原因值将被视为 true。因为 javascript 中没有类型安全，你的值 "false" 也在考虑范围内，editable 被设置为 true。

如果您无法控制从所使用的服务中获取哪些数据，您可以始终将 eiditable 值设置为 false。我已更新 fiddle 并进行了以下更改。 http://jsfiddle.net/Dnyanesh/k96tzdbz/1/

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

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

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

checkboxes checked by default in knockout.js

knockout.js