3

在下面的代码中，当我添加'if' to the bind

这是可修复的，因为我只希望它在可见时绑定？

谢谢

<script id="friendsTemplate" type="text/html">

        <li>
            <input data-bind="value : name" />
            <button data-bind="click: remove">Remove</button>

            <label><input type="checkbox" data-bind="checked : isOnTwitter" /> is on twitter</label>
            <input data-bind="if:isOnTwitter, value:twitterName" />

        </li>

</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<%--    <script src="Scripts/knockout-2.2.1.js"></script>--%>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.js"></script>
    <script src="Scripts/knockout-2.2.1.js"></script>


</head>
<body>


    <form id="form1" runat="server">
    <div>

        <h1>details</h1>

        <p>first name: <input data-bind="value: firstName" /></p>
        <p>last name: <input data-bind="value: lastName" /></p>

        <p>full name: <span data-bind ="text: fullName"></span></p>

        <h2>friends</h2>

        <ul data-bind="template: {name:'friendsTemplate',foreach:friends}"></ul>

        <script id="friendsTemplate" type="text/html">

                <li>
                    <input data-bind="value : name" />
                    <button data-bind="click: remove">Remove</button>

                    <label><input type="checkbox" data-bind="checked : isOnTwitter" /> is on twitter</label>
<%--                    <input data-bind="value:twitterName,visible: isOnTwitter" />--%>
                    <input data-bind="if:isOnTwitter, value:twitterName" />

                </li>

        </script>

        <button data-bind="click: addFriend">add friend</button>


    </div>
    </form>
</body>
</html>


<script type ="text/javascript">

    function friend(name) {
        return {
            name: ko.observable(name),
            isOnTwitter: ko.observable(false),
            twitterName: ko.observable(),
            remove: function () {
                viewModel.friends.remove(this);
            }
        };
    }




    var viewModel ={
        firstName: ko.observable("bert"),
        lastName: ko.observable("smith"),
        friends: ko.observableArray([new friend('steve'), new friend('annie')]),
        addFriend: function () {
            this.friends.push(new friend('bob'));
        }
    };

    viewModel.fullName = ko.dependentObservable(function () {
        return this.firstName() + " " + this.lastName();
    },viewModel);

    ko.applyBindings(viewModel);



</script>
4

1 回答 1

3

The if binding needs to be placed on a container. It only controls the binding/rendering of its children.

You would want to do something like:

<div data-bind="if: isOnTwitter">
   <input data-bind="value: twitterName" />
</div>

or

<!-- ko if: isOnTwitter -->
   <input data-bind="value: twitterName" />
<!-- /ko -->
于 2013-04-19T11:46:23.303 回答