Question

我正在尝试使用基于此小提琴中的示例的ember应用程序来运行模式：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

我更新了标记以反映bootstrap v3.x并从hide classNames数组中删除了ModalView值。

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();
        }
    }

});

ember.js中的模态错误

1 个答案: