Question

我已经开始查看ember js，但是我在查看模板部分时遇到了问题 - 如果我想要一个文本框来触发创建事件，这很简单我在Ember上使用insertNewline函数。 TextField视图，但是大多数Web应用程序都需要在按下按钮时填写并提交表单，我无法看到它上面有多个文本输入框的视图。

我已经关注了git hub https://github.com/mikecrittenden/tangletube上的示例，但他似乎直接从视图引用DOM元素，而不是绑定到视图的属性。

有没有人有一个使用多文本字段表单的ember项目的例子。

旁注：开发ember应用程序似乎没有标准结构，我看过的每个例子都完全不同。

Answer 1

这是一个非常简单的示例，展示了在视图中使用多个文本字段的两种方式：http://jsfiddle.net/tomwhatmore/HEaGm/

第一个使用viewName将文本字段绑定到他们的视图，这允许视图使用this.get('whateverYouPutAsViewName')访问每个文本字段。

第二个使用valueBinding将文本字段的值直接绑定到Ember对象。您对字段所做的任何更改都将自动更新对象。

两者都有一个按钮，触发一个简单的动作，使用这些值来显示它们在视图中的访问方式。希望代码非常明显。

HTML：

<script type="text/x-handlebars">
    {{#view App.HelloView}}
        {{view Ember.TextField viewName="firstName" placeholder="first name"}}
        {{view Ember.TextField viewName="lastName" placeholder="last name"}}
        <button {{action "hello"}}>Say Hello</button>
    {{/view}}

    {{#view App.BoundView}}
        {{#with person}}
            {{view Ember.TextField valueBinding="firstName"}}
            {{view Ember.TextField valueBinding="lastName"}}
        {{/with}}
        <button {{action "hello"}}>Say Hello</button>
    {{/view}}
</script>

JS：

App = Ember.Application.create()

App.HelloView = Ember.View.extend({
    hello: function() {
        alert("Hello " + this.get('firstName').get('value') + " " + this.get('lastName').get('value'));
    }
});

App.Person = Ember.Object.create({
    'firstName': 'John',
    'lastName': 'Doe',

    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName')
});

App.BoundView = Ember.View.extend({
    personBinding: 'App.Person',

    hello: function() {
        alert("hello " + this.get('person').get('fullName'));
    } 
})

Answer 2

emberjs网站上的简单绑定示例应用程序（http://emberjs.com/examples/）有多个文本框。

您可能还想查看sproutcore 2（ember的先前名称）演示应用竞赛。 http://blog.sproutcore.com/announcing-the-winners-of-the-demo-apps-contest/

一般来说，要将sproutcore 2转换为emberjs，只需将SC命名空间更改为Ember。

Ember js多文本框形式

2 个答案: