ember.js - 访问在 {{#each}} 迭代器中创建的 subview 的属性

标签 ember.js

编辑:问题出在我自己的本地设置以及我在应用程序中包含 View 的方式。一旦我解决了这些问题,问题就解决了。这里的代码实际上是正确的。 Chrixian 提供的答案也有效。

我被困在一些看似相当简单的事情上。我想访问在 Handlebars 中的每个循环内构造的 View 的一些计算属性。

<div class='build-buttons-wrapper'>
  <button class="list-builds-button" {{action "toggleBuildsList" target="view"}} ></button>
  <button class="build-button" {{action "buildApp" on="click" target="view"}} >Build</button>
</div>
<div class='builds-list'>
  <h2 class="build-title">Latest builds</h2>
  <ul class="builds-list">
  {{#each content}}
    {{#view Jimux.BuildView buildBinding="this"}}
      <span class="build-date">{{createdAt}}</span>
      <a {{bindAttr href="srcArchive"}} class="download-button source">Source</a>

      {{! *here are different ways I have tried to access "finished" property* }}
      {{log build.view.finished}}
      {{log view.finished}}
      {{log finished}}
      {{log this.finished}}
      {{log build.finished}}

      {{#if build.finished}}
        <div class="build-progressbar"></div>
      {{else}}
        <div class="build-progressbar"><div class="build-percent" style="width:{{unbound percent}}%"></div></div>
      {{/if}}
    {{/view}}
  {{/each}}
  </ul>
</div>

这是使用此模板的BuildsView:

  Jimux.BuildsView = Em.View.extend({
  templateName: 'builds'
  listVisible: false
  classNames: ['builds-view']
  buildApp: (view, event, ctx) ->
    @get('controller').newBuild()
  ,
  hideList: ->
    @set 'listVisible', false
    this.$(".builds-list").hide("slide", {direction: "up"}, 300)
  ,
  showList: ->
    @set 'listVisible', true
    this.$(".builds-list").show("slide", {direction: "up"}, 300)
  ,
  toggleBuildsList: (view, event, ctx) ->
    if @get 'listVisible' then @hideList() else @showList()
  ,
  didInsertElement: ->
    @hideList() if not @get 'listVisible'

})

这是在上面模板的 {{#each}} 迭代器内创建的 BuildView

Jimux.BuildView = Ember.View.extend(
  tagName: 'div',
  classNames: ['build-item'],
  #testBinding: true,
  sample: true,
  finished: ( ->
    return true
    #return (@get 'percent') == 100
  ).property('percent')
)

以上一切都按预期工作。例如,我可以使用 {{percent}} 访问每个 subview 的百分比属性。但是,如果我在 Jimux.BuildView 中定义自己的属性(如上所示),我似乎无法找到在 Handlebars {{#each}} 迭代器中访问它们的方法。您可以看到我在 Handlebars 代码中使用 {{log}} 语句尝试过的不同方法,所有这些都在控制台中打印 undefined 。我在这里缺少什么?

最佳答案

我假设您引用的 percent 属性是您正在循环的每个“内容”对象的属性 - 如果是这种情况,则完成看起来像这样:

finished: (->
    return @get('context.percent') is 100
).property('context.percent')

您应该能够在 {{#view Jimux.BuildView}} .. {{/view}} block 中简单地使用 {{finished}}

关于ember.js - 访问在 {{#each}} 迭代器中创建的 subview 的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13637708/

相关文章:

javascript - 如何防止在提交登录表单时清除我的密码?

javascript - Ember.js 中重新打开()和重新打开类()之间的区别

javascript - 如何使用 Ember 突出显示当前选定的列?

javascript - Uncaught Error : Could not find module `ember` imported from `ui/app` loader. js:164

ember.js - 通过在 Template 中设置 templateName 动态创建 Ember View

javascript - EmberJS 嵌套模型

javascript - 如何在 Ember 中创建一个可以包装/操作内容的 Handlebars block 助手?

javascript - Ember.run.bind 不工作

ember.js - 何时使用 getter/setter 以及何时安全地省略它们?

ember.js - 从子文件夹注入(inject) Ember 服务