Question

是否可以直接从模板动态呈现ember中的内容？

即，使用绑定到4个不同模板名称的4个链接：

<a href="javascript:void(0)" {{bindAttr view.view_to_render}} value="view_1">v1</a>
<a href="javascript:void(0)" {{bindAttr view.view_to_render}} value="view_2">v2</a>
<a href="javascript:void(0)" {{bindAttr view.view_to_render}} value="view_3">v3</a>
<a href="javascript:void(0)" {{bindAttr view.view_to_render}} value="view_4">v4</a>

{{render view.view_to_render generic_controller}}

或者有更有效的方法来实现这一目标吗？

Answer 1

从原始帖子中，我猜你想动态渲染实际视图，而不是部分模板。

摘录

{{render view.view_to_render generic_controller}}

不起作用（根据我的经验），因为ember试图寻找名为'view.view_to_render'的视图，而不是将其解释为从中读取视图的变量。

我使用的解决方案是拥有一个自定义助手：

Ember.Handlebars.registerBoundHelper( 'renderBoundView', function ( panel ) {
    var args = Array.prototype.slice.call(arguments, 1)

    Array.prototype.splice.call(args, 0,0,panel.view, 'panel.model')

    // Call the render helper
    return Ember.Handlebars.helpers.render.apply(this, args)
})

此帮助程序从传递的对象中的变量“view”中提取视图名称，然后将该名称传递给标准的渲染帮助程序。然后使用

{{renderBoundView panel}}

其中，面板具有带视图名称的属性“视图”，包含（已解析）模型的“模型”可以解决问题。

当然，您还可以将作为变量名传递的对象解释为从当前上下文（也是传递给帮助程序的参数之一）中获取。

Answer 2

Ember的全部目的是动态呈现内容。

如果你想呈现由数据驱动的特定“视图”，那么在Ember中这很容易。 Ember将这些部分模板称为“部分”，足够恰当 - ）

假设您在控制器中设置了一个名为partialToRender的属性，用于您正在进行“通用渲染”的模板。假设它绑定到一组按钮，这些按钮绑定到每个都改变partialToRender值的动作。像这样：

<button {{action changePartialToRender 'hello'}}>Change to Hello</button>
<button {{action changePartialToRender 'goodbye'}}>Change to Goodbye</button>
<button {{action changePartialToRender 'yes'}}>Change to Yes</button>
<button {{action changePartialToRender 'no'}}>Change to No</button>

然后在你的控制器中你会有这样的动作：

App.IndexController = Em.ObjectController.extend({
  partialToRender: null,
  actions: [
    changePartialToRender: function(newValue) {
      this.set('partialToRender', newValue);
    }
  ]
});

这意味着每当用户点击其中一个按钮时，partialToRender的值就会发生变化。甜，对吗？：）

所以现在我们需要做的就是连接一些渲染部分的模板代码。 partial只是另一个模板，但它是页面的一部分，而不是一个完整的...在每种情况下都有一些不同的内容，以呈现到我们的初始模板中......

所以，我们重新审视这样的模板：

<button {{action changePartialToRender 'hello'}}>Change to Hello</button>
<button {{action changePartialToRender 'goodbye'}}>Change to Goodbye</button>
<button {{action changePartialToRender 'yes'}}>Change to Yes</button>
<button {{action changePartialToRender 'no'}}>Change to No</button>
{{#if partialToRender}}
  {{partial partialToRender}}
{{/if}}

注意我只是在if语句中包含partial，以确保在未设置的情况下它不会呈现。

另请注意，我没有为您指定部分内容。我只是喜欢你的胃口。如果您真的对此感兴趣，我建议您在ember网站的入门指南中观看Ember视频。它有点漫无边际，但它展示了Ember的一些强大功能，或者可能会在Ember主站点上浏览指南/教程。

希望能回答你的问题：）

根据Ember.js Handlebars中的动态内容渲染视图？

2 个答案: