use knockout to bind value of some input in array with a span

Question

I have an array and show it as a accordion in my page. I want to bind value of some input in this array with a span that is the title of accordion. but I can't do it. if I put a data-bind for span when second rows of array insert into page , knockout shows an error that this data-bind is repetitious. how can I bind this fields together with knockout? this image may help you for understanding my problem. in this example I want to put value of First Name and Last Name instead of title of its rows.

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

thanks.

Answer 1

thank you every body for your suggestions. I can solve it just by "use the containerless control flow syntax, which is based on comment tags" as it say in documentation of knockoutjs.

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

jsfiddle link

Answer 2

I think you are looking for the foreach binding. you mentioned you are trying to realize an accordion. run the code snipped below, an example of a bootstrap accordion using knockout. is this what you are looking for?

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 3

Your models are defined as an array, with each element as another array. Remove the extra nested array to get the correct binding context:

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

should be

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

You also have a typo in one of your bindings. There's an extra T in

data-bind="textInput: lasttName"