функции в компонентах нокаута (knockoutjs 3.2+)

Question

Я пытаюсь понять компоненты нокаута 3.2, но я застрял.

У меня есть компонент «Клиенты»

ko.components.register("customers", { 
    viewModel: function (params) { 
    var self = this; 
    this.customers = ko.observableArray(); 
    this.selectedCustomerId = ko.observable(1); 
    this.selectCustomer = function (data) { 
     selectedCustomerId(data.Id); 
    }; 

    $.getJSON('http://localhost:49435/Customer/GetCustomers', this.customers); 
}, 
template: "<div><table class=\"table table-condensed table-responsive\"><thead><tr><th>Customer ID</th><th>Name</th><th>City</th></tr></thead><tbody data-bind=\"foreach: customers\"><tr><td data-bind=\"text: Id\"></td><td data-bind=\"text: Name, click: $root.selectCustomer\"></td><td data-bind=\"text: City\"></td></tr></tbody></table></div>" 
}); 

Но при связывании, я получаю следующее сообщение об ошибке:

Unable to process binding "click: function(){return $root.selectCustomer }" Message: Cannot read property 'selectCustomer' of undefined

Следующая вещь, которую я хочу сделать, это общение с selectedCustomerId к другому компоненту. Возможно ли это с помощью PubSub Synchronization и как это возможно. Может кто-нибудь дать мне подсказку, с чего начать.

Answer 1

Используйте $parent вместо $root у вас привязки. $root обычно относится к модели представления, которая передается методу ko.applyBindings.

У вас также есть другая ошибка в вашем коде - в методе selectCustomer, который вы пытаетесь получить доступ к глобальной переменной selectedCustomerId, которой не существует. Вы должны префикс его self, чтобы иметь возможность доступа к локальной переменной, которая создается в вашей модели представления.

var self = this; 
    self.customers = ko.observableArray(); 
    self.selectedCustomerId = params.SelectedCustomer; 
    self.selectCustomer = function (data) { 
     self.selectedCustomerId(data.Id); 
    }; 

Что касается прохождения selectedCustomerId к другому компоненту - вы можете создать наблюдаемый в вашей модели представления корня (который вы передаете ko.applyBindings), а затем передать его компонентам, как это:

<customers params='SelectedCustomer:selectedCustomer'></customers> 

И затем использовать это наблюдается при привязке данных. Проверьте рабочий стол fiddle.