Knockout get JSON from Yii2 to observableArray - json

Question

How can I fill observableArray data obtained from yii2. Let's say I have a static json array in knockout application:
var countries = [{"id": 1, "name": "1"}, {"id": 2, "name": "2"}, {"id": 3, "name": "3"}]
When I do this:
var VM = function(){
this.countries = ko.observableArray(countries);};
It's all good. And I can continue to use it for HTML-tag select. But when I try to retrieve data from the server it does not work. Here's how I'm trying to do.
The data from the server:
$d = Countries::find()->all();
$r = Yii::$app->response();
$r->format = Response::FORMAT_JSON;
$r->data = $d;
return $r;
Knockout application code:
var VM = function(){
this.countries = ko.pureComputed(function(){$.getJSON("/index.php?r=countries/index").done(function(data){return data;});});};
If you watch from a browser(/index.php?r=countries/index), the array looks correct:
[{"id": 1, "name": "1"}, {"id": 2, "name": "2"}, {"id": 3, "name": "3"}]
But I can't figure out how to bind to observable array. How do I get data from the server and make them as observableArray.

Answer 1

A little race started. In my previous question I learned using knockoutjs to bind multiple lists by ID. The next step was to get the lists from the server (from json yii2). It seemed that everything should be very simple, but the anything do not work. Precisely here the question arose I decided to ask the local community. I searched so long for, was thinking how to do it, tried different options. Finally I found while initializing the app to load the list. Something like this:
var C = function(){
this.t = ko.observableArray();
var loadFrom = function(){
$.getJSON("someUrl", function(data){
$.each(data, function(index, value){
t.push({'id': value.id, 'name': value.name});
});
});
};
}
var VM = function(){
}
$(function(){
ko.applyBindings(new VM());
C.loadFrom;
})
It works! To initialize this method is suitable. But what if I need to load the list data at runtime of the application. To think again! Ohhh no! And then I found a great post by Christos S. He offers to bind ViewModel to a method in the following way:
<select data-bind:"optionsValue: 'AlbumId', event: { change: function (data, event) { showAlbumTracks($('#selectArtistAlbums').val(), data, event) } }"></select>
This is what I need! But I did not like that very cluttered HTML. But then I remembered one method of living examples on the knockout website.
self.category.subscribe(function() {
self.product(undefined);
});
All now I am satisfied. Well, almost... I don't like the solution with calling any methods after ko.applyBindings(). Can someone tell me how to make it better. The answer was confusing. Later I plan to put this on jsfiddle and share with the community.