Question

我有一个数组，并在我的页面中将其显示为手风琴。我想将此数组中某些输入的值与作为accordion标题的span绑定。但我不能这样做。如果我在第二行数组插入页面时为span设置数据绑定，则knockout会显示此数据绑定重复的错误。如何将这些字段与淘汰赛绑定在一起？此图片可以帮助您理解我的问题。在这个例子中，我想要将First Name和Last Name的值替换为其行的标题。

    <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>

感谢。

Answer 1

我认为你正在寻找foreach绑定。你提到过你正在努力实现手风琴。运行下面剪下的代码，一个使用knockout的bootstrap手风琴的例子。这就是你要找的东西吗？

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>

Answer 2

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

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

应该是

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

您的某个绑定中也有拼写错误。

中有一个额外的T.

data-bind="textInput: lasttName"

Answer 3

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

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

jsfiddle link

使用knockout来绑定数组中某些输入的值与span

3 个答案: