标签: ember.js-view

我看到ember有一个非常好的机制,可以使用此处{{yield}}记录的机制将内容包装到组件中.

因此,要使用文档中的示例,我可以blog-post像这样定义组件模板:

<script type="text/x-handlebars" id="components/blog-post">
  <h1>{{title}}</h1>
  <div class="body">{{yield}}</div>
</script>

然后我可以blog-post使用以下格式嵌入任何其他模板:

{{#blog-post title=title}}
  <p class="author">by {{author}}</p>
  {{body}}
{{/blog-post}} 

我的问题是,我可以{{yield}}在组件模板中指定两个不同的插座吗？

像这样的东西可以通过Named Outlets来实现,Ember.Route#renderTemplate如下所示:

把手:

<div class="toolbar">{{outlet toolbar}}</div>
<div class="sidebar">{{outlet sidebar}}</div>

JavaScript:

App.PostsRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render({ outlet: 'sidebar' });
  }
});

我不确定我是否可以将这条路径用于一个不知道路由模板将呈现它的组件.

编辑1:

为了清楚起见,我正在尝试将Android Swipe for Action Pattern实现为Ember组件.

所以,我希望这个组件的用户能够指定两个不同的模板:

1. 正常列表项的模板,和
2. 检测到滑动(1)时显示的操作的模板.

我想把它变成一个组件,因为相当多的javascript用于处理触摸(开始/移动/结束)事件,同时仍然管理基于平滑触摸的列表滚动.用户将提供两个模板,该组件将管理触摸事件和必要动画的处理.

我已经设法让组件以块形式工作,块的内容被视为(1).第二个模板(2)通过参数(actionPartial下面)指定,该参数是操作的部分模板的名称:

组件把手模板:sfa-item.handlebars

<div {{bind-attr class=":sfa-item-actions …

我有一个场景,我不能在输入元素周围包装标签,所以它必须看起来像这样:

<label>Name</label>
{{input value=name}}

我想设置标签的属性以匹配输入元素的ID,以便渲染的输出是这样的:

<label for="ember351">Name</label>
<input type="text" value="" id="ember351" />

如何获取元素ID的引用？我已经看到了一些使用Ember.TextField视图的解决方案,但我正在寻找支持输入帮助器的解决方案(即{{input}})

我正在尝试绑定一个像这样的输入元素:

{{input value=email type="text" placeholder="Enter email" class=emailError:with-error}}

它工作得很好,只要我尝试只为它分配1个类名".with-error".如何分配2个类名,所以它将是:".with-error .second-class"？我知道怎么做:

{{bind-attr class=":secondClass emailError:with-error"}}

但这不适用于输入助手.

谢谢!

我在View中有一个表单.如何以及在何处处理表单提交事件？另外,我在哪里可以编写处理此表单中元素的事件的代码.我试过处理它:

//Instantiating a view with a template name signup
var signup = Ember.View.create({
templateName: "signup",
name: 'Sign Up',
click: function()
{
alert('click triggered from signup template');
},
submit: function()
{
alert('submit triggered');
},
signup: function()
{
alert('signup triggered');
}
});

<script type="text/x-handlebars" data-template-name="signup">
<form class="form-horizontal"  {{action "signup" on="submit"}}>
<br/>
<div  align="center" >
<table class="table-hover>
<tr>
    <td>
    <label>First Name</label>
    </td>

    <td>
    {{input value=firstName class="controls" type="text"}}
    </td>
</tr>

<tr>
    <td>
    <label>Last Name</label>
    </td>

    <td>
    {{input value=lastName class="controls" type="text"}}
    </td>
</tr>

<button class="btn …

我想将TextField绑定到由字符串变量指定的属性(请参阅编辑以获得更好的解释),如此问题.不幸的是,那里给出的答案不再适用.他们在那里使用以下视图:

App.AutoTextField = Ember.ContainerView.extend({
    type: null,
    name: null,

    init: function() {
        this._super();
        this.createChildView();
    },
    createChildView: function() {
         this.set('currentView', Ember.TextField.create({
                    valueBinding: 'controller.' + this.get('name'),
                    type: this.get('type')
                }));   
    }.observes('name', 'type')
});

到目前为止我能得到的最好的就是用valueBinding路径取而代之_parentView.context..如果我这样做,文本字段将被呈现,并且它们包含正确的值.如果我编辑它们,应用程序的其余部分不会更新.

你如何在当前版本的Ember中解决这个问题？

编辑: 在链接的问题中给出了我想要做的更好的解释.我在当前上下文中有一个对象(比如说object)和一个字符串(key).我想要一个可以显示和呈现值的文本字段object[key].