javascript - 显示与单独 Controller 关联的模型

我有一个属于WebsiteTemplate的WebLayout模型。在用户界面中，我想显示所有webLayouts的列表，但能够将html类添加到其id与webLayout相同的类中。 webLayout属于websiteTemplate，它是我们正在访问的路线的模型。

有关如何执行此操作的任何想法？我知道我的设置也可能存在根本上的错误，因此欢迎您提出想法。似乎我想将另一个参数传递给具有特定render的webLayout，但这似乎不是Ember方式。

# website_template model
App.WebsiteTemplate = DS.Model.extend
 webLayout: DS.belongsTo("App.WebLayout")

# website_layout model
App.WebLayout = DS.Model.extend
 name: DS.attr("string"),
 thumbnail: DS.attr("string")

# router
App.Router.map ->
 @resource "website_template", path: "/website_template/:website_template_id"

# website_template route
App.WebsiteTemplateRoute = Ember.Route.extend
 setupController: ->
 @controller.set 'webLayouts',  App.WebLayout.find()

# website_template template
{{webLayout.id}}
{{render "_webLayouts" webLayouts}}

# web_layouts template
<ul>
 {{#each controller}}
  <li>
   <a href="#" {{ action "addLayout" this }}>
    <img alt="Thumbnail" {{ bindAttr src="thumbnail" }}>
    {{ name }}
   </a>
  </li>
 {{/each}}
</ul>

我知道以下内容不起作用，但这是我尝试实现的想法的伪代码。

# website_template template
{{render "_webLayouts" webLayouts webLayout}}

# web_layouts template
<ul>
 {{#each webLayouts in controller}}
   {{#if webLayouts.id is webLayout.id}}
    <li class="selected">
   {{else}}
    <li>
   {{/end}}
    <a href="#" {{ action "addLayout" this }}>
    <img alt="Thumbnail" {{ bindAttr src="thumbnail" }}>
    {{ name }}
   </a>
  </li>
 {{/each}}
</ul>

最佳答案

乍看之下，我发现缺少的是两个模型之间一对一关系的正确设置。

例子:

# website_template model
App.WebsiteTemplate = DS.Model.extend
  webLayout: DS.belongsTo("App.WebLayout")

# website_layout model
App.WebLayout = DS.Model.extend
  name: DS.attr("string"),
  thumbnail: DS.attr("string"),
  websiteTemplate: DS.belongsTo("App.WebsiteTemplate")

至于ID的比较，您可以编写一个自定义的 Handlebars 帮助器，其基本外观如下:

Ember.Handlebars.registerHelper('equal', function(value1, value2, options) {
  if (value1 === value2) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});

然后像这样使用它:

{{#equal webLayouts.id webLayout.id}}
  are equal
{{else}}
  not equal
{{/equal}}

在此处查看自定义帮助程序的工作jsbin。

希望能帮助到你。

关于javascript - 显示与单独 Controller 关联的模型，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17284417/