在Ember.js Handlebars中基于动态内容呈现视图

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}}

其中面板具有带有视图名称的属性"view"和包含（解析的）模型的"model"。

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

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的值都会发生变化。甜蜜，对吧？：）

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

因此，我们重新访问如下模板：

<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语句中，以确保在未设置的情况下不会进行渲染。

另外请注意，我没有在这里为您指定部分。我只是在刺激你的食欲。如果你真的对此感兴趣，我建议你在余烬网站的入门指南上观看余烬视频。这有点杂乱无章，但它展示了Ember的一些强大功能，或者可能会浏览Ember主网站上的指南/教程。

希望能回答您的问题：）