ember.js - Ember js 多文本框表单

Question

我已经开始研究 ember js，但是我无法理解 View - 模板部分，如果我想要一个文本框来触发创建事件，这很简单，我在 Ember.TextField View 上使用 insertNewline 函数，但是，大多数 Web 应用程序都需要在按下按钮时填写并提交表单，我无法看到具有多个文本输入框的 View 正常工作。

我遵循了 git hub https://github.com/mikecrittenden/tangletube 上的示例但是，他似乎是直接从 View 中引用 DOM 元素，而不是绑定(bind)到 View 的属性。

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

附带说明:开发 ember 应用程序似乎没有标准结构，我看过的每个示例都完全不同。

Answer 1

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

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

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

两者都有一个按钮，该按钮触发一个简单的操作，该操作使用这些值来显示它们在 View 中的访问方式。希望代码是不言自明的。

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'));
    } 
})