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

Question

我有一个数组并在我的页面中将其显示为手风琴。我想将此数组中某些输入的值与作为手风琴标题的跨度绑定。但我做不到。如果我在数组的第二行插入 page 时将 data-bind 用于 span ，则 knockout 会显示此 data-bind 重复的错误。我怎样才能将这些领域与淘汰赛结合在一起？这张图片可以帮助您理解我的问题。在此示例中，我想放置名字和姓氏的值而不是其行的标题。

    <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

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

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

html

javascript

arrays

frontend

knockout.js