Question

背景

我正在对使用带有Handlebars的backbone.js作为模板引擎的应用程序进行更改。在更改事件触发后，我需要创建附加到当前DOM结构的html，这基本上只是模型中包含的信息的吐出。这种变化需要适合已经建立的应用程序结构。

问题：

我创建了一个新视图，它使用Handlebars模板和模型来创建html。然后我实例化该视图并调用render函数并使用JQuery追加输出。我注意到的是，当html被渲染时传递的模型因为$ el上的属性而不是填充模板（就像我认为的那样）。

查看我正在改变：

$.hart.TestView = Backbone.View.extend({
    tagName: "li",
    template: Handlebars.compile($('#templateOne').html()),
    initialize: function () {
        this.model.on('change', function () {
            this.createMoreInfoHtml();
        }, this);
    },
    selectSomething: function () {
        this.$el.removeClass('policies');

        this.createMoreInfoHtml(); //function created for new view stuff
    },
    createMoreInfoHtml: function () {
        var id = this.$el.attr('data-id', this.model.get("ID"));
        $('.info').each(function () {
            if ($(this).parent().attr('data-id') == id 
                $(this).remove();
        });

        var view = new $.hart.NewView(this.model, Handlebars.compile($("#NewTemplate").html()));
        $('h1', this.$el).after(view.render().el);
    },
    render: function () {
        ... //render logic
    }
});

查看我已创建：

$.hart.NewView = Backbone.View.extend({
        initialize: function (model, template) {
            this.model = model;
            this.template = template;
        },
        render: function () {
            this.$el.html(this.template({ info: this.model }));
            this.$el.addClass('.info');
            return this;
        }
    });

Json是模特：

{
        "PetName":"Asdfasdf", 
        "DateOfBirth":"3/11/2011 12:00:00 AM",      
        "IsSpayNeutered":false, 
        "Sex":"F", 
        "SpeciesID":2, 
        "ID":"ac8a42d2-7fa7-e211-8ef8-000c2964b571"
    }

模板

<script id="NewTemplate" type="text/html">
        <span>Pet Name: </span>
        <span>{{this.PetName}}</span>
    </script>

现在问题是：我做错了什么？为什么模型的属性在$ el上创建为属性而不是填充模板？有人可以指导我如何获得我想要的结果吗？

Answer 1

让我们跳过杰克注意到的问题你创建视图的方式是错误的。它可以在初始化函数中获得预期的参数时起作用，但它具有您看不到的意外行为。请参阅View的构造函数：

var View = Backbone.View = function(options) {
  this.cid = _.uniqueId('view');
  this._configure(options || {});

现在让我们来看看这个_configure方法：

_configure: function(options) {
  if (this.options) options = _.extend({}, _.result(this, 'options'), options);
  _.extend(this, _.pick(options, viewOptions));

当然......

var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];

好的，我们是......基本上，当将模型作为options参数传递时，您将传递一个带有attributes键的对象（模型的属性）。但是这个attributes键也在View中用于将属性绑定到它的元素！因此你注意到的行为。

现在，其他错误的事情。每次创建新函数时都要编译模板，但不要将其用作单例。将模板放在视图中：

$.hart.NewView = Backbone.View.extend({
  template: Handlebars.compile($("#NewTemplate").html(),

改变视图的创建，使整个过程发挥作用：

new $.hart.NewView({model: this.model});

哦，摆脱这种无用的initialize方法。你只是做Backbone已经做的事情。

使用其他视图中的模型创建骨干视图

1 个答案: