如何使用Knockout js在按钮单击上显示动态生成的textarea？ [英] How can I show a dynamically generated textarea on button click using Knockout js?

问题描述

我想根据点击按钮显示文本区域。非常简单，但textarea和按钮是使用Knockout js动态生成的。我目前的代码工作，除了它只扩展第一个文本区域。有几个项目显示。

HTML（按钮和textarea是最后两个控件）：

 <！ -  ko foreach：projects  - > 
< div id =eachOppyProjectstyle =border-bottom：1px solid #eee;> 
< table> 
< tbody> 
< tr> 
< td>< a data-bind =attr：{href：'/ tools / oppy /'+ guid}style =font-size：25px;>< span class = linkdata-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>您之前完成了项目吗？< / span> 
< input type =buttonid =oppyBtnclass =btnOppydata-bind =click：toggleTextAreavalue =Yes/> 
< textarea id =oppyDoneTextAreaplaceholder =告诉我们你做了些什么。 data-bind =visible：show/>< br /> 
< / div> 
<！ -  / ko  - > 
  

JavaScript：

  function displayTextArea（）{
 var my_disply = document.getElementById（'oppyDoneTextArea'）。style.display; 
 if（my_disply ==block）
 document.getElementById（'oppyDoneTextArea'）。style.display =none; 
 else 
 document.getElementById（'oppyDoneTextArea'）。style.display =block; 
} 
  

淘汰赛模型：

 函数ProjectViewModel（proj）{
 //console.log (proj）; 
 var self = this; 
 self.projects = ko.observableArray（proj）; 
 var project = function（）{
 var self = this; 
 self.show = ko.observable（false）; 
 self.toggleTextArea = function（）{
 self.show（！self.show（））; 
}; 
}; 
}; 
  

正如您所看到的，控件是基于Knockout绑定的对象动态生成的。所以，使用ID是一个坏主意，因为它会产生重复的ID。这是目前我的问题 - 此代码适用于第一个文本区域，但不适用于其他显示的项目。

解决方案

我会尝试在项目模型'show'和'toggleTextArea'上创建两个属性：

 < p> ！ -  ko foreach：projects  - > 
< div id =eachOppyProjectstyle =border-bottom：1px solid #eee;> 
< table> 
< tbody> 
< tr> 
< td>< a data-bind =attr：{href：'/ tools / oppy /'+ guid}style =font-size：25px;>< span class = linkdata-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>您之前完成了项目吗？< / span> 
< input type =buttonid =oppyBtnclass =btnOppyvalue =Yesdata-bind =click：toggleTextArea/> 
< textarea id =oppyDoneTextAreaplaceholder =告诉我们你做了些什么。风格=高度：960x75像素; data-bind =visible：show/>< br /> 
< / div> 
<！ -  / ko  - > 
  

您的项目模型可能如下所示：

  var project = function（）{
 var self = this; 
 self.show = ko.observable（false）; 
 self.toggleTextArea = function（）{
 self.show（！self.show（））; 
}; 
}; 
  

这允许点击按钮切换textarea的状态。

I want to show a text area based on a button click. Pretty simple, but the textarea and button are dynamically generated using Knockout js. My current code works, except it only expands the first text area. There are several projects displayed.

HTML (the button and textarea are the last two controls):

 <!-- 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" id="oppyBtn" class="btnOppy" data-bind="click: toggleTextArea" value="Yes" />
        <textarea id="oppyDoneTextArea" placeholder="Tell us a little of what you've done." data-bind="visible: show" /><br />
    </div>
<!-- /ko -->

JavaScript:

function displayTextArea() {
    var my_disply = document.getElementById('oppyDoneTextArea').style.display;
    if (my_disply == "block")
        document.getElementById('oppyDoneTextArea').style.display = "none";
    else
        document.getElementById('oppyDoneTextArea').style.display = "block";
}

Knockout View Model:

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

As you can see, the controls are dynamically generated based on the objects that Knockout binds. So, using ID's is a bad idea because it would generate duplicate IDs. That is currently my problem now -- this code works for the first text area but doesn't work for the rest of the projects that display.

解决方案

I would try creating 2 properties on the project model, 'show' and 'toggleTextArea':

<!-- 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" id="oppyBtn" class="btnOppy" value="Yes" data-bind="click: toggleTextArea" />
    <textarea id="oppyDoneTextArea" placeholder="Tell us a little of what you've done." style="height:75px;" data-bind="visible: show" /><br />
</div>
<!-- /ko -->

your project model could be something like this:

var project = function(){
    var self = this;
    self.show = ko.observable(false);
    self.toggleTextArea= function(){
        self.show(!self.show());
    };
}; 

This allows the click of the button to toggle the status of the textarea.

这篇关于如何使用Knockout js在按钮单击上显示动态生成的textarea？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！