杜兰达淘汰赛未定义

Question

我有一个问题，从淘汰赛数组中删除对象。 我怎么了 它说：TypeError：that.active_periods是未定义的。 那么，那是怎么回事：that.active_periods.removeAll（freeDay）;

period.js

define(function (require) {
        var backend = require('backend');
        var ko = require('knockout');
        var app = require('durandal/app');

        return {
            active_periods:ko.observableArray([]),
            activate:function(){
                var that = this;
                backend.getActivePeriods().then(function(results){
                    that.active_periods(results);
                });
            },
            editActivePeriod:function(period){
                period.viewUrl = 'views/editActivePeriod';
                app.showDialog(period);
            },
            editFreeDays:function(){
                alert("hh");
            },
            deleteFreeDays:function(freeDay){
                var that = this;
                app.showMessage('Willst du wirklich diese freien Tag(e) löschen?', '', [ { text: "Ja", value: "Yes" }, { text: "Nein", value: "No" }],true, { style:  { width: "600px", height: "600" } }).then(function(response){
                if(response == "Yes"){
                    that.active_periods.removeAll(freeDay);
                }
                });
            }
        };
    });

period.html

<section>
    <div class="row">
        <div class="col-md-6">
            <h3 class="center-block">aktive Perioden</h3>
            <hr>
            <button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> neue Periode erstellen</button>
            <br>
            <!-- ko foreach: active_periods -->
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <!--ko text: name--><!--/ko--> (<!--ko text: startDate--><!--/ko--> - <!--ko text: endDate--><!--/ko-->)<i class="fa fa-cog fa-lg pull-right" data-bind="click:$parent.editActivePeriod"></i>
                    </h3>
                </div>
                <div class="panel-body">
                    <ul data-bind="foreach: freeDays">
                        <li>
                            <!--ko text: name--><!--/ko-->
                            <i class="fa fa-times-circle fa-lg pull-right" data-bind="click:$parents[1].deleteFreeDays"></i>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /ko -->
        </div>
        <div class="col-md-6">
            <h3>archivierte Perioden</h3>
            <hr>
        </div>
    </div>
</section>

Answer 1

在JavaScript中，正在构造的对象文字尚不能引用自身。 active_periods是在您要引用的文字上定义的。

将代码更改为此：

define(function (require) {
    var backend = require('backend');
    var ko = require('knockout');
    var app = require('durandal/app');

    var active_periods = ko.observableArray([]);  //<-Declared outside the reveal

    return {
        active_periods: active_periods, //<-Referenced here
        activate:function(){
            var that = this;
            backend.getActivePeriods().then(function(results){
                that.active_periods(results);
            });
        },
        editActivePeriod:function(period){
            period.viewUrl = 'views/editActivePeriod';
            app.showDialog(period);
        },
        editFreeDays:function(){
            alert("hh");
        },
        deleteFreeDays:function(freeDay){
            var that = this;
            app.showMessage('Willst du wirklich diese freien Tag(e) löschen?', '', [ { text: "Ja", value: "Yes" }, { text: "Nein", value: "No" }],true, { style:  { width: "600px", height: "600" } }).then(function(response){
                if(response == "Yes"){
                    that.active_periods.removeAll(freeDay);
                }
            });
        }
    };
});

更好的方式

让我们更进一步 ，并使用显示模块模式 。 如果您不熟悉这种模式，请告诉我。 另外，我希望您知道您在这里使用单例模式。 这么说，考虑一下：

define(function (require) {
    var    
        backend = require('backend'),
        ko = require('knockout'),
        app = require('durandal/app'),

        active_periods = ko.observableArray([]),

        activate = function() {
            backend.getActivePeriods().then(function(results){
                active_periods(results);
            });
        },

        editActivePeriod = function(period){
            period.viewUrl = 'views/editActivePeriod';
            app.showDialog(period);
        },

        editFreeDays = function(){
            alert("hh");
        },

        deleteFreeDays = function(freeDay){
            app.showMessage('Willst du wirklich diese freien Tag(e) löschen?', '', [ { text: "Ja", value: "Yes" }, { text: "Nein", value: "No" }],true, { style:  { width: "600px", height: "600" } }).then(function(response){
                if(response == "Yes"){
                    active_periods.removeAll(freeDay);
                }
            });
        };

    return {
        active_periods: active_periods,
        activate: activate,
        editActivePeriod: editActivePeriod,
        editFreeDays: editFreeDays,
        deleteFreeDays: deleteFreeDays
    };        
});

希望对您有所帮助。

更新：增强的deleteFreeDays

添加对UnderscoreJS库的引用后，我们进行了其他一些修改。

define(function (require) {
    var    
        backend = require('backend'),
        ko = require('knockout'),
        _ = require('underscore'),    //<--Add a reference to UnderscoreJS (or LodashJS)
        app = require('durandal/app'),

        active_periods = ko.observableArray([]),

        activate = function() {
            backend.getActivePeriods().then(function(results){
                active_periods(results);
            });
        },

        editActivePeriod = function(period){
            period.viewUrl = 'views/editActivePeriod';
            app.showDialog(period);
        },

        editFreeDays = function(){
            alert("hh");
        },

        //Return an array where no element of the array equals freeDay
        _removeAllFreeDays = function (freeDay) {             //<--Private function: not exported
            return _.reject(active_periods, function (day) {
                return _.isEqual(day, freeDay);
            });
        }

        deleteFreeDays = function(freeDay){
            app.showMessage('Willst du wirklich diese freien Tag(e) löschen?', '', [ { text: "Ja", value: "Yes" }, { text: "Nein", value: "No" }],true, { style:  { width: "600px", height: "600" } }).then(function(response){
                if(response == "Yes"){
                    active_periods.removeAll();            //<--Empty observableArray
                    active_periods(_removeAllFreeDays(freeDay));  //<--Fill observableArray with new array devoid of freeDays                       
                }
            });
        };

    return {
        active_periods: active_periods,
        activate: activate,
        editActivePeriod: editActivePeriod,
        editFreeDays: editFreeDays,
        deleteFreeDays: deleteFreeDays
    };        
});