emberjs控制器通信混淆

时间:2013-07-10 10:24:02

标签: ember.js

我正在使用带有emberjs rc6的bootstrap。我想使用渲染助手来显示bootstrap模态。这就是我所做的:

avatar.hbs:

<aside class='avatar-aside'>
  **{{#if inEditModel}}
    {{render 'avatar/edit' model}}
  {{/if}}**
</aside>

<div class='avatar-inner'>
  {{#if canManage}}
    <a class='lnk-edit' href='#' **{{action 'edit'}}**>
      <img class='image-medium' {{bindAttr src='imageMediumPath'}}>
      <span class='bar-edit'><i class='icon-edit'></i></span>
    </a>
  {{else}}
    <img class='image-medium'
         {{bindAttr src='imageMediumPath'
                    alt='controllers.user.basicinfo.nickname'}}>
  {{/if}}
</div>

avatar_controller.js.coffee

Yu.AvatarController = Em.ObjectController.extend
  inEditModel: false

  edit: ->
    @set 'inEditModel', true

化身/ edit_view.js.coffee

Yu.AvatarEditView = Em.View.extend
  tagName:    'section'
  classNames: 'avatar-edit modal fade'.w()

  didInsertElement: ->
    @$().modal
      backdrop: 'static'
      keyboard: false

  willDestroyElement: ->
    @$().modal 'hide'

化身/ edit_controller.js.coffee

Yu.AvatarEditController = Em.ObjectController.extend
  needs: 'avatar flashEmbeded'.w()

  close: ->
    @get('controllers.avatar').set 'inEditModel', false

  cancel: ->
    @get('controllers.avatar').set 'inEditModel', false

  update: ->
    userId  =  @get 'userId'

    Yu.Avatar.
      update(userId).

      done((response) =>
        @get('controllers.avatar').set 'inEditModel', false
      ).

      fail((response) =>
        errormsg = $.parseJSON(response.responseText).errors[0]
        @get('controllers.flashEmbeded').notify 'errormsg', errormsg
      )

如您所见,我想通过切换头像控制器的inEditModel来显示或隐藏头像/编辑模板。直到现在,我所知道的就是我             @get('controllers.avatar')。set'inEditModel',false在头像编辑控制器中,头像控制器中的inEditModel不会改变。 我想知道我是否有两个不同的头像控制器实例。我做错了什么?谢谢!

1 个答案:

答案 0 :(得分:1)

我猜你在这里遇到了一些绑定问题,可能有助于尝试定义更像这样的事情:

Yu.AvatarEditController = Em.ObjectController.extend
  needs: 'avatar flashEmbeded'.w()
  avatarControllerBinding: 'controllers.avatar'

  close: ->
    @get('avatarController').set 'inEditModel', false

  cancel: ->
    @get('avatarController').set 'inEditModel', false
  ...

至于bootstrap模式,你一定要看看这个插件https://github.com/emberjs-addons/ember-bootstrap。我自己成功地使用了它,并且与ember.js rc6有关。

希望它有所帮助。