1

由于主干表单扩展了主干视图，我想使用自定义模板应该以相同的方式完成。

首先：在标题中插入模板作为脚本 type="text/html"元素

<head>
    [ ... ]
    <script type="text/html" id="myTemplate">
        <h1>This is a template for my view</h1>
    </script>
</head>

然后使用模板的id设置视图的模板属性

var myView= new Backbone.View.extend({
    template: '#myTemplate',
    [...]
});

对于主干形式，模板不起作用：

<head>
    [...]
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/underscore.js"></script>
    <script type="text/javascript" src="scripts/backbone.js"></script>
    <script type="text/javascript" src="scripts/backbone-forms.js"></script>
    <script type="text/html" id="myTemplate">
        <h2>This is my custom form template!</h2>
        <form><%= fieldsets %></form>
    </script>
</head>
<body>
    <div id="myform"></div>
    <script type="text/javascript">
        $(document).ready(function(){
            MyModel = Backbone.Model.extend({
                schema: {
                    id : {type : "Number", validators : ["required"]},
                    first_name: {type : "Text", validators : ["required"]},
                    last_name: {type : "Text", validators : ["required"]},
                    screen_name: {type : "Text"}
                }
            });
            var myModel = new MyModel();
            var myForm = new Backbone.Form({
                template: '#myTemplate',
                model : myModel
            });
            $('#myform').html(myForm.render().el);
        });
    </script>
</body>
</html>

此代码输出以下错误：

Uncaught TypeError: Property 'template' of object [object Object] is not a function

然后我在设置模板属性时尝试使用下划线。它也不起作用

var myForm = new Backbone.Form({
    template: _.template($('#myTemplate')),
    model : myModel
});

上面的代码也会出现不同的错误：

Uncaught TypeError: Object [object Object] has no method 'replace'

我是骨干/骨干形式的新手。有人可以告诉我我做错了什么吗？

谢谢！

4

1 回答 1

1

Try

template: function(attrs) { return _.template($('#myTemplate').html(), attrs)},

Use template like this:

$('body').append(this.template({fieldsets: 'fieldsets'}));

See a working example http://jsbin.com/uzutes/2/

于 2013-05-09T17:08:28.940 回答