淘汰赛无法处理“foreach”的绑定

Posted 2023-03-27

【中文标题】淘汰赛无法处理“foreach”的绑定

【英文标题】：Knockout unable to process biding for 'foreach'

【发布时间】：2015-03-17 13:52:08

【问题描述】：

我是淘汰赛的新手。对于我的问题，我试图让每个项目都有一个按钮和文本区域。 textarea 将在页面加载时隐藏。如果我单击按钮，它将显示文本区域，或隐藏它（切换）。我实现了以下代码，但出现此错误：

Uncaught ReferenceError: Unable to process binding "foreach: function ()return projects”消息：无法处理绑定“可见： function ()return show " Message: show is not defined

查看模型：

function ProjectViewModel(proj) 
            //console.log(proj);
            var self = this;
            self.projects = ko.observableArray(proj);
            self.show = ko.observable(false);
            self.toggleTextArea = function () 
                self.show(!self.show());
            ;
        ;

html：

                <!-- ko foreach: projects -->
            <div id="eachOppyProject" style="border-bottom: 1px solid #eee;">
            <table>
                <tbody>
                    <tr>
                        <td><a data-bind="attr:  href: '/tools/oppy/' + guid " style="font-size: 25px;"><span class="link" data-bind="    value: guid, text: name"></span></a></td>
                    </tr>
                    <tr data-bind="text: projectDescription"></tr>
<%--                    <tr data-bind="text: guid"></tr>--%>
                </tbody>
            </table>
                 <span class="forminputtitle">Have you done project this before?</span>  <input type="button" value="Yes" data-bind="click: $parent.toggleTextArea" class="btnOppy"/>
                <textarea placeholder="Tell us a little of what you've done." data-bind="visible: show, attr: 'id': guid " class="form-control newSessionAnalyst" style="height:75px; " /><br />
                <span> <input type="checkbox" name="oppyDoProjectAgain" style="padding-top:10px; padding-right:20px;">I'm thinking about doing this again. </span>
            <br />
                </div><br />
                <!-- /ko -->

【参考方案1】：

你得到的错误的重要部分是：

消息：显示未定义

这发生在你打电话的地方：

data-bind="visible: show ... "

发生这种情况是因为 Knockout 试图在您的 projects 对象中查找名为 show 的变量，但由于 show 和 projects 都是 ProjectViewModel 的子对象，所以它没有找到。

要引用show，您可以改用$parent.show：

data-bind="visible: $parent.show ... "

【讨论】：

我将$parent 添加到toggleTextArea，但没想到将其添加到show。谢谢。这现在引入了一个新问题：当我单击显示文本区域的按钮时，它会显示页面上的所有文本区域，而不仅仅是相应的文本区域。有没有办法将唯一标识符链接到切换，以便显示正确的文本区域？