jQuery技术:如何使用knockout点击按钮从多个textareas和单选按钮获取输入？

我有几个textareas和单选按钮，它们是在ko: foreach绑定中动态生成的。 当用户决定输入完成后，他们会点击一个“确定”按钮，它会获取textareas的所有输入和他们选择的单选按钮的值，并且它应该触发对服务器的ajax调用，因为输入需要存储在数据库中。 每个textarea和radiobutton值都是单独存储的，因此需要将它们作为标识值发送到服务器。 鉴于foreach绑定，我一直遇到很多麻烦，所以我不知道从哪里开始因为textareas没有可访问的唯一标识符，因为它们是使用foreach生成的。 谢谢。

所以，简单来说：

任何帮助表示赞赏或链接到我可以遵循的任何资源。 我的谷歌搜索并没有完全回答我的问题。

图片：

服务器：

 //retrieves form data from the client and serialized it if (Request.HttpMethod == "POST") { // get json out of body var serializer = new JsonSerializer(); var sr = new StreamReader(Request.InputStream); var jtr = new JsonTextReader(sr); dynamic data = serializer.Deserialize(jtr); if (data.action == "getProjects") { getProjects(data); } } 

通过ajax发布的示例对象：

  Obj = {}; Obj.action = "getProjects"; Obj.list = arrayOfCheckboxValues; 

视图：

   
  
   Did it already   Didn't do it, but interested  Never done it; not interested 
 
  <textarea class="form-control newSessionAnalyst" /> </div> <div> <textarea class="form-control newSessionAnalyst" /> <textarea class="form-control newSessionAnalyst" /> </div> <div class="btn-group"> <label class="btn btn-default">  Interested in doing more</label> <label class="btn btn-default">  No plans to do this again</label> </div> <div> <textarea class="form-control newSessionAnalyst" /> <textarea class="form-control newSessionAnalyst" /> </div> <div style="text-align: right"> <br /><br /> </div> //this is the button that captures all input </div> <!-- /ko --></code> </pre>
<p> 查看型号： </p>
<pre> <code>function ViewModel(proj) { var self = this; var wrappedProjects = proj.map(function (p) { return new Project(p); }); self.projects = ko.observableArray(wrappedProjects); } function Project(proj) { var self = proj; self.firstAnswers = ko.observable(true); self.doneAnswer = ko.observable(false); self.showDoneTA = function () { self.doneAnswer(true); self.interestedAnswer(false); } self.interestedAnswer = ko.observable(false); self.showInterestedTA = function () { self.interestedAnswer(true); self.doneAnswer(false); self.interestedMore(false); } self.interestedMore = ko.observable(false); self.showInterestedMoreTA = function () { self.interestedMore(true); } self.notInterestedMore = function () { self.interestedMore(false); } self.neverInterested = function () { self.doneAnswer(false); self.interestedAnswer(false); self.interestedMore(false); } self.btnOK = ko.observable(false); self.showBtnOK = function () { self.btnOK(true); console.log(self.btnOK()); } self.savedMSG = ko.observable(false); self.clearView = function () { self.firstAnswers(false); self.doneAnswer(false); self.interestedAnswer(false); self.interestedMore(false); self.btnOK(false); self.savedMSG(true); } self.showFirstAnswers = function () { self.firstAnswers(true); self.savedMSG(false); } return self; }</code> </pre>
</p>
<ul></ul>
<p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins      style="display:block; text-align:center;"      data-ad-layout="in-article"      data-ad-format="fluid"      data-ad-client="ca-pub-8401008596536068"      data-ad-slot="7893885747"></ins> <script>      (adsbygoogle = window.adsbygoogle || []).push({}); </script>  	 </p>
<div>
<div>
<p> 在foreach中生成textareas不是问题，并且它们不需要唯一标识符。 </p>
<p> 我不确定是什么： </p>
<pre> <code>var wrappedProjects = proj.map(function (p) { return new Project(p); });</code> </pre>
<p> 虽然它假设它生成一个项目数组，foreach很好。 我注意到并非所有textareas都有值绑定，这会导致它们不会被填充值。 </p>
<p> 我确实看到了这个绑定：$ parent.saved_value。 在这种情况下，$ parent将是ViewModel，并且未定义。 </p>
<p> 在我改变之前，我遇到了foreach的错误： </p>
<pre> <code><textarea> 

至：

淘汰赛引发了一个错误，说明foreach没有关闭。

我怀疑你是从“jQuery心态”接近这个，因为你做的事情是这样的：

它看起来像你试图设置唯一的ID和名称，希望在提交时用jQuery读取输入的val（）。 虽然我不知道你的textInput绑定是什么，但似乎doneProjectComment不是你的Project数据模型上的一个observable，因此在中输入的数据并没有真正结束。

Knockout方法是在Project上添加一个doneProjectComment observable，并使用value绑定绑定到它：

  function Project(proj) { self.doneProjectComment = ko.observable(); } 

Knockout为您提供双向绑定。 如果value: doneProjectComment绑定，这意味着如果用户键入textarea，则值将保存到doneProjectComment 。 如果更改了doneProjectComment ，则新值将显示在textarea中。

因此，如果您想在用户单击“确定”时收集所有数据，您可以从Project内部轻松完成 – 只需读取您关注的所有可观察对象，并创建jQuery.post可以用作AJAX参数的哈希：

 function Project(proj) { self.toAjaxParameters = function(){ return { interested: self.interestedAnswer(), done: self.doneAnswer(), ... } } } 

HTML：

如果在ViewModel上设置了savefunction

 self.save = function(project){ $.post('/url-to-post-to', project.toAjaxParameters()); } 

HTML：

我建议安装Knockout Context Debugger，这样可以更轻松地调试knockout问题。