Question

我正在尝试将JSON数据列表分成段（“滑块”）并成功创建了我想要的格式的数据对象，但是foreach绑定没有按预期工作。

HTML模板：

    <div class="slide" data-bind="foreach: actionSliders">
                Stuff
    </div>

这是我的相关Knockout代码：

function Slider() {
    this.actions = ko.observableArray([]);      
}

var viewModel = {
    actionSliders: ko.observableArray([])
};

viewModel.loadData = function() {       
//LOAD Actions from API
       jQuery.ajax({
           type: 'GET',
            url: 'http://'+window.location.hostname+'/api/actions/get_author_posts/',
            dataType: 'json',
            success: function (ActionData) {

            console.log('getJSON data - Actions',ActionData.posts);

            var actionSlidersCount = 0; 
            viewModel.actionSliders([]);

            //create the first slider array
            viewModel.actionSliders().push(new Slider());
            viewModel.actionSliders()[0].actions([]);

            jQuery.each(ActionData.posts, function(index) {

                    // add each action to the current slider
                    viewModel.actionSliders()[actionSlidersCount].actions().push(new Action(this));

                    //add a new slider every 5 records
                    var calc = (parseInt(index)+1)%5;
                    if(calc ==0 ){
                        //new slider
                        actionSlidersCount++;
                        viewModel.actionSliders().push(new Slider());
                        viewModel.actionSliders()[actionSlidersCount].actions([]);
                    }                               
             });                
             console.log('ActionSliders',viewModel.actionSliders());
            },
            data: { },
            async: true
        }); 

};

这是我的数据在控制台中的样子：

ActionSliders 
[Slider, Slider, Slider, Slider, Slider, Slider, Slider, sortNum: function, random: function, sum: function, max: function, min: function…]
    0: Slider
        actions: Object[0]
        __proto__: Slider
    1: Slider
    2: Slider
    3: Slider
    4: Slider
    5: Slider
    6: Slider
    length: 7
    __proto__: Array[0]

* I can access all the data with console commands:

> viewModel.actionSliders()[0].actions()[0]

Action {id: 197, title: "Turned off the tap while brushing my teeth"…}

> viewModel.actionSliders()

[ Slider, Slider, Slider, Slider, Slider, Slider, Slider]

因此，正如您所看到的，在工作模型中（控制台中没有错误，没有数据绑定错误），对象完全填充了数据，而在模板中，“stuff”应该重复6次 - 一次每个滑块，但循环甚至没有工作。在其他人中有可观察数组是否有问题？我在创建Slider对象的方式中遗漏了什么吗？欢迎任何建议。

Answer 1

由于您将new Slider对象推入了actionSliders observableArray，我猜测结构可能是这样的：

actionSliders = [
 {
   actions = {}
 },
 {
   actions = {}
  }
];

我很抱歉，如果这对你不起作用，但如果你试图像这样绑定它怎么办？：

<div class="slide" data-bind="foreach: actionSliders().actions">
    Stuff
</div>

Answer 2

我找到了答案，这是一个两部分问题。

foreach没有工作的原因是因为我正在推动功能，而不是数组。我需要使用：

viewModel.actionSliders.push(new Slider());

而不是：

viewModel.actionSliders().push(new Slider());

一旦我这样做，foreach就为主要对象工作了

然后，我意识到我需要将数据注入类，而不是从外部注入。为了解决这个问题，我修改了这样的代码：

        var tempActionArray = [];

        jQuery.each(ActionData.posts, function(index) {
            //add an action to the current slider
            var tempAction = new Action(this);
            tempActionArray.push(tempAction);

            var calc = (parseInt(index)+1)%5;
            if(calc ==0 ){
                //add a new slider
                actionSlidersCount++;
                viewModel.actionSliders.push(new Slider(tempActionArray));

                //reset temp array
                tempActionArray = [];
                        //viewModel.actionSliders[actionSlidersCount].actions([]);  
            }

        });

        function Slider(data) {
        var data = data || [];
        this.actions = ko.observableArray([]);
        var Actions = [];
        //console.log("slider data",data)
        jQuery.each(data, function(index) {
            //console.log("action index",data[index])
            Actions.push(data[index]);
        }); 
        this.actions = Actions; 
    }

现在世界上一切都很好！ :)继续......

完全填充的ko.observableArray将不会在使用foreach的模板中显示

2 个答案: