Question

如何填写从yii2获取的observableArray数据。让我们说我在淘汰应用程序中有一个静态json数组：

var countries = [{"id": 1, "name": "1"}, {"id": 2, "name": "2"}, {"id": 3, "name": "3"}]

当我这样做时：

var VM = function(){
this.countries = ko.observableArray(countries);};

一切都很好。我可以继续使用它来进行HTML标签选择。但是，当我尝试从服务器检索数据时，它不起作用。这就是我试图做的事情。来自服务器的数据：

$d = Countries::find()->all();
$r = Yii::$app->response();
$r->format = Response::FORMAT_JSON;
$r->data = $d;
return $r;

Knockout应用程序代码：

var VM = function(){
this.countries = ko.pureComputed(function(){$.getJSON("/index.php?r=countries/index").done(function(data){return data;});});};

如果您从浏览器（/index.php?r=countries/index）观看，该数组看起来是正确的：

[{"id": 1, "name": "1"}, {"id": 2, "name": "2"}, {"id": 3, "name": "3"}]

但我无法弄清楚如何绑定到可观察数组。如何从服务器获取数据并将其作为observableArray。

Answer 1

一场小小的比赛开始了。在我的previous question中，我学会了使用knockoutjs按ID绑定多个列表。下一步是从服务器获取列表（来自json yii2）。似乎一切都应该非常简单，但任何事都行不通。正是在这里出现了问题，我决定问当地社区。我搜索了这么久，正在考虑如何去做，尝试了不同的选择。最后我在初始化应用程序时发现加载列表。像这样：

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;
})

有效！初始化此方法是合适的。但是如果我需要在应用程序的运行时加载列表数据呢？再想一想！哦，不！然后我找到了Christos S.的great post。他提出通过以下方式将ViewModel绑定到方法：

<select data-bind:"optionsValue: 'AlbumId', event: { change: function (data, event) { showAlbumTracks($('#selectArtistAlbums').val(), data, event) } }"></select>

这就是我需要的！但我不喜欢那个非常混乱的HTML。但后来我想起了knockout website.

中的一种生活方式示例

 self.category.subscribe(function() {
    self.product(undefined);
});

现在我很满意。好吧，差不多......我不喜欢在ko.applyBindings（）之后调用任何方法的解决方案。有人能告诉我如何让它变得更好。答案令人困惑。后来我打算把它放在jsfiddle上并与社区分享。

Knockout从Yii2获取JSON到observableArray

1 个答案: