使用敲除将数组中某些输入的值与跨度绑定答案

【问题标题】：use knockout to bind value of some input in array with a span使用敲除将数组中某些输入的值与跨度绑定
【发布时间】：2017-06-06 05:34:46
【问题描述】：

我有一个数组，并在我的页面中将其显示为手风琴。我想将此数组中某些输入的值与作为手风琴标题的跨度绑定。但我做不到。如果我在将第二行数组插入到 page 时为 span 放置数据绑定，则剔除显示此数据绑定重复的错误。如何将这些字段与淘汰赛绑定在一起？这张图片可以帮助你理解我的问题。在此示例中，我想输入名字和姓氏的值而不是其行的标题。

    <div data-bind="foreach: { data: people, as: 'person'}"> 
    <div class="item form-collection-group " > 
    <div class="title active">
        <span class="accordion-title" data-bind="text : fullName"> fullName should be shown here </span>
    </div>
    <div class="content form-collection-content-holder active">
        <div class="">
            <div class="field " >
                <div class="detailList[0]---item---id">
                    <label class=""> first Name </label>
                    <div class="ui input">
                        <input type="text" data-bind="textInput: lasttName">
                    </div>
                </div>
                <div class="sixteen wide field jsonform-required">
                    <label class=""> last Name </label>
                    <div class="ui  input">
                        <input  data-bind="textInput: firstName" type="text"  >
                    </div>
                </div>
     <script>
     var ViewModel = function(first,last) {
     this.firstName = ko.observable(first);
     this.lastName = ko.observable(last);
     this.fullName = ko.computed(function() {
     return this.firstName() + " " + this.lastName();
     }, this);};

     ko.applyBindings({
     people: [
                     [new ViewModel('Zahra','Saffar')] ,  [new      ViewModel('Mahsa','Hoori')]
             ]
    });
    </script>

谢谢。

【问题讨论】：

stackoverflow.com/help/mcve
@zahra 最好在这里分享您所做的（代码），然后我们可以通过查看您的代码 sn-p 来帮助您。
我使用语义用户界面来创建这个手风琴。所以它只是一些div。我将部分代码放在 JsFiddle 中。但也许还不清楚。我删除了大部分你可以更好地理解我的代码的部分。这是代码链接：jsfiddle.net/pzso5897/12

标签： javascript arrays html knockout.js frontend

【解决方案1】：

我认为您正在寻找 foreach 绑定。您提到您正在尝试实现手风琴。运行下面截取的代码，这是一个使用淘汰赛的引导手风琴的例子。这是你要找的吗？

function accordianRow(title, id, text) {
  var self = this;
  this.title = ko.observable(title);
  this.url = ko.observable('#' + id);
  this.id = ko.observable(id);
  this.text = ko.observable(text)
  this.firstName = ko.observable('');
  this.lastName = ko.observable('');
}


function model() {
  var self = this;
  this.accordianRows = ko.observableArray([
    new accordianRow('Title One', 'collapseOne', 'this is text one'),
    new accordianRow('Title Two', 'collapseTwo', 'this is text two'),
    new accordianRow('Title Three', 'collapseThree', 'this is text three'),
  ]);
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>


<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" data-bind="foreach: accordianRows">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" 
                 data-toggle="collapse"
                 data-parent="#accordion" 
                 aria-expanded="true" 
                 data-bind="attr: { href: url, 'aria-controls': id }">
          <span data-bind="text: title"></span>
        </a>
      </h4>
    </div>
    <div class="panel-collapse collapse " 
         role="tabpanel" 
        aria-labelledby="headingOne" 
        data-bind="attr: {id: id}, css: { in: $index() < 1 }">
      <div class="panel-body ">
         <input type="text "
         class="form-control "
         placeholder="first name " 
         data-bind="textInput: firstName "/>  
         <input type="text "
         class="form-control "
         placeholder="last name " 
         data-bind="textInput: lastName "/>  
      </div>
    </div>
  </div>
</div>

【讨论】：

坦克布莱恩。也许我应该解释更多。

【解决方案2】：

您的模型被定义为一个数组，每个元素都是另一个数组。移除多余的嵌套数组以获得正确的绑定上下文：

people: [
            [new ViewModel('Zahra','Saffar')] ,  [new ViewModel('Mahsa','Hoori')]
        ]

应该是

people: [
            new ViewModel('Zahra','Saffar') ,  new ViewModel('Mahsa','Hoori')
        ]

您的其中一个绑定也有错字。

中有一个额外的 T

data-bind="textInput: lasttName"

【讨论】：

【解决方案3】：

感谢大家的建议。我可以通过“使用基于注释标签的无容器控制流语法”来解决它，正如它在 knockoutjs 文档中所说的那样。

 <!-- ko foreach: myItems -->
    ...     
 <!-- /ko -->

jsfiddle link

【讨论】：