Question

我正在使用HandlebarsJS插件来渲染我的模板。我在调用渲染函数时遇到错误。

当我控制this.model.toJSON()时，我得到了正确的数据，我也安装了“homeEditTemp”我也得到了我的模板..

但是当我将数据传递给模板时，我收到的错误为：Uncaught TypeError: undefined is not a function

这是我的代码：

    define([
        'jquery',
        'underscore',
        'backbone',
        'marionette',
        'hbs!scripts/templates/home/homeEditTemp'],
        function ($,_,Backbone, Marionette, homeEditTemp) {
            "use strict";
            window.socialApp = window.socialApp || {};

            socialApp.homeView = Backbone.Marionette.ItemView.extend({

                initialize : function (model) {
                    this.model = model;
                },

                render : function () {
console.log(this.model.toJSON()) // works fine
console.log(homeEditTemp) // works fine.
                    this.$el.html(homeEditTemp(this.model.toJSON())); // throws the error..
                }

            });

            return socialApp.homeView;
    });

这是我的handlebars模板：

<form>
     <div class="control-group">
         <label for="firstName" class="control-label"> First name:</label>
         <input id="firstName" name="firstName" type="text" value="{{firstName}}"/>
     </div>
     <div class="control-group">
         <label for="lastName" class="control-label"> Last name:</label>
         <input id="lastName" name="lastName" type="text" value="{{lastName}}"/>
     </div>
     <div class="control-group">
         <label for="email" class="control-label">Phone number:</label>
         <input id="email" name="email" type="text" value="{{email}}"/>
     </div>
     <button class="btn js-submit">Save</button>
</form>

提前致谢！

更新：

当我手动分配值时，它可以正常工作：

render : function (model) {
                var obj = {
                    "firstName" : "testFirstName ",
                    "lastName" : " test lastName"
                }
                this.$el.html(homeEditTemp(obj));
            }

会出现什么问题？

当我控制我的模型时，它显示如下：

Object {model: s}model: s_changing: false_events: Object_pending: false_previousAttributes: Objectattributes: Objectchanged: Objectcid: "c6"__proto__: n__proto__: Object

Answer 1

首先，您需要编译模板

var tpl = function () {
     return Handlebars.compile(homeEditTemp);
}

然后你可以使用这个

this.$el.html(tpl(this.model.toJSON()));

Answer 2

尝试这样：

socialApp.homeView = Backbone.Marionette.ItemView.extend({
template:homeEditTemp,
initialize : function (model) {
    this.model = model;
},

render : function () {
    var output = this.template(this.model.toJSON());
    this.$el.html(output);
    return this;
}

}）;

但是@vahan是对的，你不需要通常覆盖渲染方法，只需要设置模板和模型变量，并且木偶将会处理它

Answer 3

我改变了model - 这样的实现，它对我有用。

initialize : function (arg) {
                this.model = arg.model; //it works!
            }

而不是：

initialize : function (model) {
                this.model = model; //i am not directly got the model here..?
            }

MarionetteJS - 无法使用toJSON函数呈现数据

3 个答案: