此模板引擎不支持'if'在其模板内绑定

This template engine does not support the 'if' binding within its templates

本文关键字：绑定 if 引擎 不支持      更新时间：2023-09-26

在下面的代码中，当我添加'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>

if绑定需要放置在容器上。它只控制子元素的绑定/呈现。

你会想要这样做:

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

或

<!-- ko if: isOnTwitter -->
   <input data-bind="value: twitterName" />
<!-- /ko -->
相关文章：