Question

我创建了一个面板组件，其中包含一个按钮，其中包含控制器中的一些操作。

所以第一个疑问：组件和视图之间的主要区别是什么？

我真的不知道我是否正在以正确的方式做事

首先我创建了一个“父”控制器，它将包含将面板操作发送到指定控制器操作的方法

App.BasicArrayController = Ember.ArrayController.extend({

 actions : {
     panelActions : function(action) {
    this.send(action)
   },
  },
});


 App.BasicObjectController = Ember.ObjectController.extend({

actions : {
    panelActions : function(action) {
        this.send(action);
    },

    },

 });

接下来我创建了控制器，它将扩展“父”并创建一个对象，其中包含要在面板中显示的名称和控制器中的操作名称

App.AlbumController = App.BasicObjectController.extend({

    arrayActions : [Em.Object.create({name: 'Edit'},{action:'edit'}),Em.Object.create({name: 'Delete'},{action:'delete'})],

  actions : {

        edit:function(){
            this.transitionToRoute('album.edit'); 
        },
        confirmDelete:function(){
            this.get('model').deleteRecord();
            this.get('model').save();
            this.transitionToRoute('albums');
        }
      }
 });

这是在ember中扩展控制器的正确方法吗？

接下来，我使用bootstrap

创建了组件模板（.hbs）

<div {{bind-attr class=bootStrapClass}}>
<div class="panel-heading">

    {{#if arrayActions}}
    <div style="margin-top: -1.3%" class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle"
            data-toggle="dropdown">
            Actions <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            {{#each arrayActions}}
            <li><a href="#" {{action 'panelActions' this on='click'}}>{{name}}</a></li>
            {{/each}}
        </ul>
    </div>
    {{/if}}

    <h3 data-toggle="collapse" data-parent="#accordion" {{bind-attr
        href=hrefCollapseId}} {{action 'collapse' on='click'
        }} class="panel-title">
        <span {{bind-attr id=collapseId}}
            class="glyphicon glyphicon-collapse-up">{{title}} 
    </h3>
</div>
<div {{bind-attr id=customId}} class="panel-collapse collapse in">
    <div class="panel-body">{{yield}}</div>
</div>
   </div>
   <!-- Modal -->
  <div class="modal fade" {{bind-attr id=myModalId}} tabindex="-1"
   role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button {{action 'cancelDelete'}} type="button" class="close"
                data-dismiss="modal">
                <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Album</h4>
        </div>
        <div class="modal-body">Are you shure?</div>
        <div class="modal-footer">
            <button type="button"
                {{action 'cancelDelete'}} class="btn btn-default"
                data-dismiss="modal">Cancel</button>
            <button type="button"
                {{action 'confirmDelete' this}} class="btn btn-primary">Confirm</button>
        </div>
    </div>
     </div>
 </div>

现在是组件.js

App.PanelPrimaryComponent = Ember.Component.extend({

 setupIds: function(){
        this.setProperties({ 
            collapseId: "collapse" + this.get('customId'),
            hrefCollapseId:"#" + this.get('customId'),
            myModalId: "myModal" + this.get('customId')
        });
    }.on("init"),
actions : {
    panelActions : function(obj) {

        if(obj.action==="delete") this.send('delete');
        else
         this.sendAction('panelActions',obj.action);
    },
    delete:function(){
        var jqueryModalId = "#"+ this.get('myModalId');
        $(jqueryModalId).modal('toggle')
    },
    cancelDelete:function(){
        this.set('deleteMode',false);               
    },
    confirmDelete:function(){
        $(".close").click();
        this.sendAction('panelActions','confirmDelete');
    },

    collapse:function(){
        var jQueryCollpaseId= "#"+this.get('collapseId');
        if($(jQueryCollpaseId).hasClass("glyphicon-collapse-down")){
            $(jQueryCollpaseId).removeClass("glyphicon-collapse-down").addClass("glyphicon-collapse-up")
        }
        else{
            $(jQueryCollpaseId).removeClass("glyphicon-collapse-up").addClass("glyphicon-collapse-down")
        }
    }
  }
});

接下来是使用组件

的模板

<div class="col-xs-6">
{{#panel-primary title="Album" bootStrapClass="panel panel-success" customId="album" arrayActions=arrayActions panelActions='panelActions'}}
 <span class="label label-default">Name: </span> {{name}} <span
    class="label label-default">Description: </span> {{description}} {{/panel-primary}}
 </div>
{{outlet}}

一般来说，这是做这种组件的最佳方法吗？我总是做些不同的事情？

由于我可以有多个面板，我必须绑定动态ID（“collpase”和“modalId”，这是正确的方法吗？
这是将此类操作发送到组件中控制器的最佳方法吗？
一般来说，这是做这种组件的最佳方法吗？我一般会做些什么不同？

一般来说，java开发人员对ember组件提出疑问

0 个答案: