1

我正在使用数组对象和淘汰赛 js。下面的一些代码使该数据可用于绑定并且一切正常。但是当我试图在数组行中推送一些数据时，我收到了这个错误消息：

未捕获的类型错误：无法调用未定义 ADMIN_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>

有人可以告诉我我的错误在哪里吗？这是我的jsfiddle：http: //jsfiddle.net/uhtshka/BWxm7/3/

4

1 回答 1

2

错误是“无法调用未定义的方法推送。” 这意味着你试图调用 push on 的东西是未定义的。让我们看看哪一行代码调用了 push：

alld.row.push(...);

错误消息告诉您 alld.row 未定义。所以让我们看看 alld 是从哪里来的，看看我们是否能弄清楚为什么 alld 上的 row 属性是未定义的：

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

它首先被制成一个 observableArray，但是当它被重新定义为 Object.days 时它就被清除了。让我们看看 Objects.days 是在哪里定义的，以及为什么它没有名为“row”的属性。

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

Objects.days 是一个数组。数组中的每个项目都有一个名为 row 的属性，但数组本身没有名为 row 的属性。因此，如果您想将某些东西推入行数组，您首先必须弄清楚您想推入哪一个 - 您有 3 个 - 一个用于星期一，一个用于星期二，一个用于星期三。如果你想推入星期一的数组，你可以这样做：

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

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

你有一个 div 作为一个 tbody 的孩子。您应该只将 tr 作为 tbody 的子级，而 td 在 tr 内部。然后 div 可以是 tr 的子级。

您有一个位于 div 内的原始数据绑定字符串，如下所示（不包括 #Monday 的其他子项）：

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

我猜你的意思是把 data-bind 作为属性放在某个东西上。但是，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 成为带有来自 Objects 的数据的 observableArray。

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

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

第一行完全没用，因为当您将不同的东西分配给 alld 时，您在第一行中创建的 observableArray 会被清除。这种相同的模式在您的代码中多次出现。

什么是卓尔？drow 是 alld.row - 这是未定义的，正如刚才讨论的那样，所以你不能用 new 关键字调用它，就好像它是一个构造函数一样。

什么是自我？你永远不会定义自我。通常在使用淘汰赛时，您会将其放在视图模型的顶部：

var self = this;
于 2013-04-08T04:16:21.450 回答