javascript - 将数组值分配给knockoutjs中的变量

Question

我想将数组值分配给knockoutjs中的变量。 我可以通过 for 循环迭代数组。我的代码是

<!-- ko foreach: {data: friends, as: 'friend'} --> 
<span data-bind="text:friend"></span> 
<!-- /ko -->

<script type="text/javascript">

    var viewModel = {
        firstname: ko.observable("X"),
        lastname: ko.observable("Y"),
        friends: ko.observableArray(["A", "B"]),
        books: ko.observableArray(["Book1", "Book2"]),
    };
    viewModel.fullname = ko.dependentObservable(function () {
        return this.firstname() + " " + this.lastname();
    }, viewModel);
    ko.applyBindings(viewModel); 
</script>

但我想要书的第一个元素，然后迭代 friend 。喜欢

<!-- ko {books()[0], as : 'book'} -->
<!-- ko foreach: {data: friends, as: 'friend'} -->

<span data-bind="text:friend"></span>
<span data-bind="text:book"></span>

<!-- /ko -->
<!-- /ko -->

我知道我的做法是错误的。但我不知道如何获取第一本书的元素，然后迭代 friend 。

Answer 1

三种方法可以做到这一点:

1. 创建自定义绑定(bind)以将内容添加到绑定(bind)上下文
2. 为您的 friend 图书组合创建新的 View 模型
3. 使用 $parent 或 $root 关键字，不允许您定义新的变量名称

1。使用自定义绑定(bind)

基于this例如，您可以扩展绑定(bind)上下文。请注意，foreach 还会创建一个新的绑定(bind)上下文，因此您仍然需要使用 $parent。您还可以扩展标准 foreach 绑定(bind)，以包含用于扩展绑定(bind)上下文的额外参数(以摆脱 $parent)。

var viewModel = {
  firstname: ko.observable("X"),
  lastname: ko.observable("Y"),
  friends: ko.observableArray(["A", "B"]),
  books: ko.observableArray(["Book1", "Book2"]),
};

ko.bindingHandlers.withProperties = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // Make a modified binding context, with a extra properties, and apply it to descendant elements
        var innerBindingContext = bindingContext.extend(valueAccessor);
        ko.applyBindingsToDescendants(innerBindingContext, element);
 
        // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice
        return { controlsDescendantBindings: true };
    }
};
ko.virtualElements.allowedBindings.withProperties = true;
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<!-- ko foreach: { data: friends, as: 'friend' } -->
<!-- ko withProperties: { book: $parent.books()[0] } -->
<span data-bind="text:friend"></span>
<span data-bind="text:book"></span>
<!-- /ko -->
<!-- /ko -->

2。创建新的 View 模型

我认为这是“最纯粹的” View 模型 - View 解决方案。

var viewModel = {
  firstname: ko.observable("X"),
  lastname: ko.observable("Y"),
  friends: ko.observableArray(["A", "B"]),
  books: ko.observableArray(["Book1", "Book2"]),
};

viewModel.bookFriendCombos = ko.pureComputed(function() {
  var book = viewModel.books()[0];
  return viewModel.friends().map(function(friend) {
      return {
        friend: friend,
        book: book
      };  
  });
});


ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<!-- ko foreach: bookFriendCombos -->
<span data-bind="text:friend"></span>
<span data-bind="text:book"></span>
<!-- /ko -->

3。使用 $parent

可能是最容易实现的，只要您的观点保持简单，我更喜欢这个。

var viewModel = {
  firstname: ko.observable("X"),
  lastname: ko.observable("Y"),
  friends: ko.observableArray(["A", "B"]),
  books: ko.observableArray(["Book1", "Book2"]),
};
viewModel.fullname = ko.dependentObservable(function() {
  return this.firstname() + " " + this.lastname();
}, viewModel);
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<!-- ko foreach: {data: friends, as: 'friend'} -->
<span data-bind="text:friend"></span>
<span data-bind="text:$parent.books()[0]"></span>
<!-- /ko -->