ember.js中的模態錯誤

Question

我正在嘗試根據這個小提琴中的示例使用一種模式來處理余燼應用程序： http : //jsfiddle.net/marciojunior/tK3rX/

但是，模態無法打開，並且我在控制台中收到此錯誤：

Uncaught Error: Nothing handled the action 'showModal'.

有人可以找到原因嗎？ 這是我的ModalView：

App.ModalView = Ember.View.extend({
    templateName: "modal",
    title: "",
    content: "",
    classNames: ["modal", "fade", "hide"],
    didInsertElement: function() {
        this.$().modal("show");
        this.$().one("hidden", this._viewDidHide);
    },
    // modal dismissed by example clicked in X, make sure the modal view is destroyed
    _viewDidHide: function() {
        if (!this.isDestroyed) {
            this.destroy();
        }
    },
    // here we click in close button so _viewDidHide is called
    close: function() {        
        this.$(".close").click();
    }
});

而我的subjectRoute應該用來處理showModal事件：

App.SubjectRoute = Ember.Route.extend({
  model: function(params) { 
    return this.store.find('subject', params.subject_id);
  }

    events: {
        showModal: function() {
            App.ModalView.create({ title: "Edit Subject", content: "My content" }).append();
        }
    }

});

這是我的主題模板，從中可以打開模式（這只是為了測試我能否使其工作，最終將通過編輯按鈕調用模式）：

<script type = "text/x-handlebars" id = "subject">
{{#if deleteMode}}
<div class="confirm-box">
  <h4>Really?</h4>
  <button {{action "confirmDelete"}}> yes </button>
  <button {{action "cancelDelete"}}> no </button>
</div>
{{/if}}

<h2>{{name}}</h2>


<button {{action "edit"}}>Edit</button>
<button {{action "delete"}}>Delete</button>
{{outlet}}

<a {{action showModal}} href="#">Open modal</a>
</script>

和我的模態視圖：

<script type="text/x-handlebars" data-template-name="modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>{{view.title}}</h3>
    </div>
    <div class="modal-body">
        <p>{{view.content}}</p>
    </div>
    <div class="modal-footer">
        <a {{action close target="view"}} href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</script>

謝謝。

Answer 1

我更新了標記以反映引導程序v3.x，並從ModalView的classNames數組中刪除了hide值。

http://emberjs.jsbin.com/IZavuVUM/2#subject

http://emberjs.jsbin.com/IZavuVUM/2/edit

HBS

<script type="text/x-handlebars" data-template-name="modal">


  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{{view.title}}</h4>
      </div>
      <div class="modal-body">
        <p>{{view.content}}</p>
      </div>
      <div class="modal-footer">

        <a {{action close target="view"}} href="#" class="btn btn-default">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->


</script>

JS

    App = Ember.Application.create();

App.Router.map(function() {
  this.route("subject");
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.ModalView = Ember.View.extend({
    templateName: "modal",
    title: "",
    content: "",
    classNames: ["modal", "fade"],
    didInsertElement: function() {
        this.$().modal("show");
        this.$().one("hidden", this._viewDidHide);
    },
    // modal dismissed by example clicked in X, make sure the modal view is destroyed
    _viewDidHide: function() {
        if (!this.isDestroyed) {
            this.destroy();
        }
    },
    // here we click in close button so _viewDidHide is called
    close: function() {        
        this.$(".close").click();
    }
});

App.SubjectRoute = Ember.Route.extend({
  model: function(params) { 
    return [];//this.store.find('subject', params.subject_id);
  },

    actions: {
        showModal: function() {
            App.ModalView.create({ title: "Edit Subject", content: "My content" }).append();
        }
    }

});