Question

完成Ember's Getting Started Tutorial后，我正在尝试制作我的第一个非常基本的应用程序并且已被阻止：）

我只想做一个简单的Hello World：

我的HTML包含用户可以输入姓名时的文本输入
当用户按Enter键时，<div>将更新为文本：“Hello user！”

这是我的模板：

<script type="text/x-handlebars" data-template-name="user">
    <form role="form">
        <div class="form-group">
            <label for="firstname">Firstname</label>
            {{input type="text" class="form-control" id="new-user" value=newFirstname action="updateMessage"}}
        </div>
    </form>
    <div class="well" id="new-greeting">
        {{newGreeting}}
    </div>
</script>

这是我的控制器：

Teamtools.UserController = Ember.ArrayController.extend({
    newGreeting: "Empty",
    actions: {
        updateMessage: function () {
            var firstname = this.get('newFirstname');
            this.newGreeting = "Hello " + firstname;
        }
    }
});

加载页面时，会出现输入字段和“空”消息。太好了！

但是当我输入一个名字然后输入时，我被重定向到一个空白的/?页面。我确信这是非常基本的东西，但如果我能帮助理解这里出了什么问题，我真的很感激。

ps：它可以帮助解释，我通常更像是Ruby on Rails世界。

Answer 1

我认为问题在于为输入元素指定一个“操作” - 这是您要将表单数据发送到的URL，因此您不需要它，因为您不需要发出服务器请求。同样，您不需要在控制器中使用动作哈希。

Ember比你给它的功劳更加聪明。您可以对其进行设置，以便在发生任何更改时无需处理，因为它会自动执行。你需要做的是这样的事情：

Teamtools.UserController = Ember.ArrayController.extend({
    newGreeting: function () {
        var firstName = this.get("newFirstName");
        var greeting = "Empty";

        if (firstName.length !== 0)
        {
            greeting = "Hello " + firstName;
        }

        return greeting;
    }.property("newFirstName")
});

newGreeting方法结尾处的属性（“newFirstName”）很重要：它告诉Ember可以评估newGreeting以提供可以在视图中显示的属性（计算属性）。 “newFirstName”参数告诉Ember，每当更改newFirstName时都应重新计算此值。

免责声明：我实际上没有测试过这段代码，但它应该是你所追求的......

Answer 2

从您的操作中返回false，以使其不会渗透。对索引的导航发生在可以响应操作的控制器/路由链的更远处。

基本的灰烬你好世界的情况

2 个答案: