Мне нужен чистый способ доступа к родительской области видимости в foreach

Question

У меня есть много мест, где я использую нокаутированные данные, связанные с циклами foreach.Хорошим примером будет список элементов, с правой кнопкой мыши на кнопке с надписью «изменить».Я пишу код, который выглядит следующим образом:

<div data-bind="foreach: myListData">
    ... other divs ...
    <button data-bind="click: $parent.editItem.bind($data)">View</button>
</div>

Функция editItem будет выглядеть примерно так:

editItem: function (review, data) {
    window.location = "/item/edit/" + review.Id();
},

Я нахожу использование $parentантипаттерн, и я также думаю, что использование .bind и только для нокаута $data в одной строке довольно загадочно, особенно если разработчик не очень близко знаком с нокаутом.

Есть ли лучший, более чистый способ записи функций доступа к родительской области в нокаут-foreach?

Answer 1

Вы можете поместить функцию editItem в каждом обзоре или передать ссылку на модель представления, для которой определена функция editItem.

Я не тестировал следующий образец, но он должен дать вамидея.

function Review(review, vm) {
    var self = this;
    review = review || {};
    self.vm = vm;
    self.Id = ko.observable(review.Id || 0);

    // More properties if needed
}

// Add an editItem prototype to each Review
Review.prototype.editItem = function(review) {
    // The bound item is passed in with the click binding
    window.location = "/item/edit/" + review.Id();

    // Or without using the item passed
    // window.location = "/item/edit/" + this.Id();

    // Or using the editItem function on the view model
    // this.editItem = this.vm.editItem(review);
};


function ReviewViewModel() {
    var self = this;
    self.myListData = ko.observableArray([]);

    // Add some sample data to the observable array
    var myListData = [];
    myListData.push(new Review({ Id: 1}, self));
    myListData.push(new Review({ Id: 2}, self));
    myListData.push(new Review({ Id: 3}, self));
    myListData.push(new Review({ Id: 4}, self));

    self.myListData(myListData);

    // If you would rather have the editItem function on the view model
    self.editItem = function(review) {
        window.location = "/item/edit/" + review.Id();
    };
}

// Markup
<button data-bind="click: editItem">View</button>