使用bootstrap模态和Ember 1.5设置模型和相关操作

Question

参见＆＃39;编辑＃1＆＃39;基于第一个答案和jsbin

的更新代码

我正在尝试将引导模式集成到Ember应用程序中。我有一个名为main-modal-content的id，想要在模板中写入该id。我有以下控制器：

App.InventoryItemController = Ember.ObjectController.extend({
  actions:{
    showModal: function(){
    var item=this.get('model');
    var source   = $("#ii-edit").html();
    var template = Handlebars.compile(source);
    var html_str    = template(item);
    $('#main-modal-content').html(html_str);    
    $('#myModal').modal(); 
   },
    saveInventoryItem: function(){
      alert('now to save!!!');  
    }
  },

  isExpanded:false  
});][1]

和这个模板：

  <script type="text/x-handlebars-template" id="ii-edit">
     here is my edit {{id}}  <div {{action 'saveInventoryItem' target='InventoryItemController'}}>save inventory item</div>
  </script>

但是我收到以下错误：

如何将目标引用设置回InventoryItemController，以便可以调用saveInventoryItem？此外，这只是第一次通过 - 这似乎是在Ember中进行模态的合理方式吗？

THX

编辑＃1

这是尝试维护对开放模式的引用的示例：http://jsbin.com/tabor/2/edit

我已用此更新了应用程序路径，但不清楚如何为相关控制器设置模型 - 或者这条路线可能需要返回模型？：

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    openModal: function(modalName, object) {
      this.controller.set('model', object);  // <- this is not working
      this.set('model',object);  // <- this also isn't working

      this.render(modalName, {
        into: 'application',
        outlet: 'modal',
        controller: 'modal' 
      });

      if($('#myModal')){
        $('#myModal').modal('show');
      }
      console.log('after this');

    },
    closeModal: function() {
    //return this.disconnectOutlet({

    this.disconnectOutlet({
      outlet: 'modal',
      parentView: 'application'

    });
    $('#myModal').modal('hide');

    }
   },
  });

将此添加到上述路线并没有帮助

        // even hardcoding this isn't working!!!!
  model:function(){
     //return this.get('object');
     return Em.Object.create({id: 7, name: 'Jon'});
    }

和模板：

   <script type="text/x-handlebars" data-template-name="myModal">
      <div>
       id val: {{id}}
        <button {{action 'sayHello' id }}>Say Hello</button>

       </div>
    </script>

Answer 1

以更简单的方式查看the cookbook。

它涉及在您的应用程序模板中某处有modal出口，并使用路由的render方法将模板插入其中：

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    openModal: function(modalName) {
      return this.render(modalName, {
        into: 'application',
        outlet: 'modal'
      });
    },

    closeModal: function() {
     return this.disconnectOutlet({
       outlet: 'modal',
       parentView: 'application'
     });
    }
});