使用Ember.js编写和提交表单视图

时间:2012-06-04 15:08:03

标签: ember.js

我正在进行概念证明演示,我需要编写一个表单视图,这样我就可以将项目添加到我的内容数组中。我在外部加载此视图,然后使用Handler编译它。我添加了一个提交方法并使用了{{action}}绑定,但每次单击提交按钮时它都会重新加载页面。我错过了什么?

//模板

<form>
    <div>
        <label for="client">Client Name</label>
        <input type="text" id="client" placeholder="Add client name" />
    </div>
    <div>
        <button {{action "addClientSubmit" target="PM.addClientView"}}>Add Client</button>
    </div>
    <div>
        <a href="#" {{action "closeWindow" target="PM"}}>close</a>
    </div>
</form>

//视图代码

PM.addClientView = Ember.View.create({
    templateName: 'addClient',
    classNames: 'overlay',
    addClientSubmit: function(e){
        e.preventDefault();
        console.log('submitting add client form');
        console.log(a,b,c)
    }
});

//最后这是我如何将它添加到页面

PM = Ember.Application.create({
    loadView: function(view){
        $.ajax({
            url: viewPath,
            success: function (template) {
                if (!Ember.TEMPLATES[templateName]) {
                    Ember.TEMPLATES[templateName] = Ember.Handlebars.compile(template);
                };
                PM[view + 'View'].appendTo('body');
            }
        });
    }
});

其他一切都有效,但当我点击提交按钮时,页面会重新加载。我确定我要留下一些东西,但我无法弄清楚它是什么。

2 个答案:

答案 0 :(得分:6)

您可能需要将type="button"添加到按钮标记中。默认值为type="submit",将触发表单提交。

这是一个jsFiddle:http://jsfiddle.net/b2CTg/2/

答案 1 :(得分:1)

问题是创建PM.addClientView时模板不存在。

尝试将PM.addClientView = Ember.View.create({更改为PM.addClientView = Ember.View.extend({

你的成功功能

  

PM [view +'View'] .create({template:   Ember.Handlebars.compile(template)})。append();

这是一个小提琴:http://jsfiddle.net/7E5zt/