昏死。在foreach语句中打印对象的两个属性

时间:2017-09-22 10:37:28

标签: html knockout.js

我有一个observableArray属性self.FilteredStudents,学生有名字和姓氏,我想一起打印。

以下是HTML中的foreach代码:

<div class="row justify-content-center" data-bind="foreach: FilteredStudents">
                <div class="col-md-6 col-lg-4">
                    <div>
                        <div class="LLUserCard">
                            <div class="LLUserCardHeader">
                                <div>$name $lastName</div>
                                <div></div>
                            </div>
                            <div class="LLUserCardBody">

                            </div>
                            <div class="LLUserCardFooter">
                                $enrollmentDate
                            </div>
                        </div>
                    </div>
                </div>
            </div>

显然上面的代码不起作用,伪代码<div>$name $lastName</div>只是用来指定我要找的东西。

在所有示例或教程中,我发现他们使用了两个元素,如<td data-bind="text: name"></td><td data-bind="text: lastName"></td>,但我不想在不同的元素中打印值,我希望它们是一个元素的文本元件。

谢谢。

1 个答案:

答案 0 :(得分:2)

你可以在文本绑定上使用计算或纯计算函数或内联函数https://jsfiddle.net/0o89pmju/69/

HTML

<p>
    <span data-bind="text: Name"></span>
    </p>
      <p>
      Or
      </p>
      <span data-bind="text: (firstname() + ' ' + lastname() )"></span>

JS

function viewModel() {
  var self = this;
  this.firstname = ko.observable('bob');
   this.lastname = ko.observable('smith');

  self.Name = ko.pureComputed(function () {
             return self.firstname() + ' '  + self.lastname()
        },this);
}


var vm = new viewModel();


(function($) {
  ko.applyBindings(vm); //bind the knockout model
})(jQuery);