jquery - 无法访问主干视图中模板的 DOM 元素

Question

我有这样的看法：

var InvoiceForm = Backbone.View.extend({
    template: _.template(addform),
    initialize: function () {
        this.$("#buyer").val("test");
    }
});

我有包含买家 id 元素的模板 addform。这不是设置值。我知道我在这里做一些愚蠢的事情:)

Answer 1

视图中的主干模板不会自动呈现。事实上，在Backbone 文档中，有一些示例可以做到这一点。

如果您在视图中使用模板，它应该在初始化时呈现，您可以这样编写代码：

var InvoiceForm = Backbone.View.extend({
    template: _.template(addform),
    render: function() {
        this.$el.html(this.template());
        return this;
    },
    initialize: function () {
        this.render(); // Rendering your template in your this.el element
        this.$("#buyer").val("test"); // Setting the value of #buyer in your template
    }
});

您稍后可以像这样使用此视图：

var form = new InvoiceForm({ el: $("#wrapper_for_invoiceform") });

检查这个小提琴中的演示：http: //jsfiddle.net/hsn7J/

Answer 2

如果您尝试在点击事件上执行此操作 - 更改为“测试”值，您可以使用以下操作

initialize: function(){
            this.model.on('change', this.render, this);         
        },

    render: function() {
            this.$el.html( this.template(this.model.toJSON()) );
            this.input = this.$('#buyer');
            return this;
        },

    events: {
     'click #buyer' : 'editValue',
    },

    editValue: function(){
        this.input.val("test");
    }