Durandal淘汰赛点击事件

时间:2014-12-26 23:29:04

标签: javascript jquery html knockout.js durandal

我需要你的帮助。我试过了,但无法找到解决方案。当我按下图标时,clickevent没有开始删除其中一个免费日。另一个clickevent工作。这是我的代码:

periods.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(){
                alert("ha");
                return app.showMessage('Willst du wirklich diese freien Tag(e) löschen?', '', [ { text: "Ja", value: "Yes" }, { text: "Nein", value: "No" }]);
            }
        };
    });

periods.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:$parent.deleteFreeDays"></i>
                  </li>
              </ul>
          </div>
      </div>
      <!-- /ko -->
      </div>
  <div class="col-md-6">
      <h3>archivierte Perioden</h3>
      <hr>
  </div>
</div>
</section>

我错了什么?

2 个答案:

答案 0 :(得分:2)

我不得不反对韦恩。您应该使用以下内容:data-bind="click: $root.deleteFreeDays"。使用这种方法,您对viewModel的访问不会在结构上依赖。

这是$root的用途。

答案 1 :(得分:1)

因为freeDays是active_periods的子级,它是视图模型的子级,所以您需要获取祖父母而不是父级data-bind="click: $parents[1].deleteFreeDays"