使用knockout并尝试将一些新数据推入数组，我得到了未定义的错误.为什么

Question

我工作与数组对象和knockout js。下面的一些代码使该数据可用于绑定，并且一切正常。但是当我试图推一些数据在数组行我得到了这个错误消息:

Uncaught TypeError: Cannot call method 'push' of undefinedADMIN_gym_demo3.html: 217

现在我不明白为什么这个结构不起作用。

Objects = {days: [
        {day: 'Monday', row:[{
                col1: '100', col2: '200', col3: '300', col4: '400', col5: '500'
            },{
                col1: '100', col2: '200', col3: '300', col4: '400', col5: '500'
            },{
                col1: '100', col2: '200', col3: '300', col4: '400', col5: '500'
            }]},{//////////////////////////////////////////////////////////////
        day: 'Tuesday', row:[{
                col1: '100', col2: '200', col3: '300', col4: '400', col5: '500'
            },{
                col1: '100', col2: '200', col3: '300', col4: '400', col5: '500'
            },{
                col1: '100', col2: '200', col3: '300', col4: '400', col5: '500'
            }]},{//////////////////////////////////////////////////////////////
        day: 'Wednesday', row:[{
                col1: '100', col2: '200', col3: '300', col4: '400', col5: '500'
            },{
                col1: '100', col2: '200', col3: '300', col4: '400', col5: '500'
            },{
                col1: '100', col2: '200', col3: '300', col4: '400', col5: '500'
            }]}///////////////////////////////////////////////////////////////
    ]};

var ViewModel = function(){
    var self = this;
    cont = ko.mapping.fromJS(Objects);
    alld = cont.days;
    thisrow = self.row;
    crow = alld.thisrow;
    val1 = ko.observable('');
    val2 = ko.observable('');
    val3 = ko.observable('');
    val4 = ko.observable('');
    val5 = ko.observable('');
    add = function(){
            var vm1 = val1;
            var vm2 = val2;
            var vm3 = val3;
            var vm4 = val4;
            var vm5 = val5;
            crow.push({
                col1: vm1(), col2: vm2(), col3: vm3(), col4: vm4(), col5: vm5() });
            };
    }; 
    ko.applyBindings(new ViewModel);

这就是html: 的效果

<div data-bind="foreach: alld">
                    <p data-bind="text: day"></p>
                    <table class="table table-striped table-condensed" >        
                    <thead>
                    <tr>
                        <th>time</th>
                        <th>training time</th>
                        <th>difficulty</th>
                        <th>coach</th>
                        <th>gym</th>
                    </tr>
                    </thead>
                    <tbody data-bind="foreach: row">
                    <tr >
                        <td data-bind="text: col1">7.00-10.00</td>
                        <td data-bind="text: col2">bodypump</td>
                        <td data-bind="text: col3">I-III</td>
                        <td data-bind="text: col4">Michael Ivanov</td>
                        <td data-bind="text: col5">01</td>
                    </tr>
                    </tbody>

                </table>
                <div style="width: 100%" >
                        <div style="display: inline; float: left; width: 20%"  >
                            <input data-bind="value: val1" />             
                        </div>                                            
                        <div style="display: inline; float: left; width: 20%">
                            <input data-bind="value: val2" />            
                        </div>                                           
                        <div style="display: inline; float: left; width: 20%">
                            <input data-bind="value: val3" />             
                        </div>                                            
                        <div style="display: inline; float: left; width: 20%">
                            <input data-bind="value: val4" />             
                        </div>                                            
                        <div style="display: inline; float: left; width: 20%">
                            <input data-bind="value: val5" />
                        </div>
                        <a href="#" data-role="button" data-icon="star" data-iconpos="right" data-mini="true" data-bind="click: add" >Add row</a>    
                </div>

谁能告诉我我错在哪里?这是我的档案。http://jsfiddle.net/uhtshka/BWxm7/3/

Answer 1

错误是" cannot call method push of undefined "。这意味着你试图调用push的东西是未定义的。让我们看看哪一行代码调用了push:

alld.row.push(...);

错误信息告诉你。行未定义。我们来看看alld从哪里来看看我们是否能弄清楚为什么alld的row属性是undefined

alld = ko.observableArray();
alld = Objects.days;

它首先被创建为一个observableArray，但是当它被重新定义为Object.days时，它被删除了。让我们看看对象。，以及为什么它没有一个名为'row'的属性。

Objects = {days: [
  { day: 'Monday', row:[...] },
  { day: 'Tuesday', row:[...] },
  { day: 'Wednesday', row:[...] }
]};

对象。Days是一个数组。数组中的每一项都有一个名为row的属性，但数组本身没有名为row的属性。所以如果你想把一些东西放到行数组里，你首先要弄清楚你想放到哪个行数组里——你有3个行数组——一个星期一，一个星期二，一个星期三。如果你想要推入星期一的数组，你可以这样做:

alld[0].row.push(...);

总的来说，我不太确定你在这里想做什么。你的标记和代码有几个问题，所以代码的目的对我来说有点神秘。但这里还有一些你应该调查的事情:

你有一个div作为body的子元素。您应该只将tr作为body的子元素，并且td位于tr的内部。div可以是tr的子元素。

在div中有一个原始数据绑定字符串，如下所示(不包括#Monday的其他子元素):

<div id="Monday">
  data-bind="template: { name: 'object', foreach: filterByDay('Monday') }""
</div>

我猜你的意思是把数据绑定作为一个属性上的东西。但是，filterByDay在任何地方都没有定义。

我看到这行代码，在这里你使用ko.mapping:

var cont = ko.mapping.fromJS(Objects);
alld = ko.observableArray();
alld = Objects.days;

cont在任何地方都不会被使用，并且alld最终会成为一个数组(而不是一个observableArray)。我猜你是想这样做:

var cont = ko.mapping.fromJS(Objects);
alld = cont.days;

这将导致alld是一个observableArray，其中的数据来自object。

我之前提到过你有这两行代码:

alld = ko.observableArray();
alld = Objects.days;

第一行是完全无用的，因为你在第一行创建的observableArray会在你给alld分配不同的值时被清除。同样的模式在您的代码中存在多次。

什么是卓尔?卓尔老了。Row -正如刚才讨论的那样，这是未定义的，因此您不能用new关键字调用它，就好像它是构造函数一样。

什么是self?你从不定义自我。通常在使用knockout时，您将把它放在视图模型的顶部:

var self = this;