Question

我是骨干新蜂，我正在尝试下面的样本

加载时我得到this.el.html不是函数，请告诉我它是什么原因。

HTML：

<div id="container"></div>
<script type="text/template" id="template">
<input type="text" name="Name" id="Name"></input>
<input type="button" name="Add" id="Add" value="Add"></input>

<div id="list"></div>
</script>

JavaScript的：

NameModel = Backbone.Model.extend({


});
var nameModel = new NameModel();
nameModel.set('name','test');
alert(nameModel.get('name'));
NameView = Backbone.View.extend({
    tagName:"li",
    render: function(){
        var template=_.template("<%=name%>", nameModel.toJSON());
       return template;
    }
});
var nameView = new NameView();
NameViewList = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        var template = _.template($("#template").html(), {});
        this.el.html(template);
    },
    events : {
        "click input#Add" :"addName",
    },
    addName : function() {
        var name = $("#Name").val();
        if (name.trim().length > 0) {
           //nameModel.set("name", name);
            $("#list").append(nameView.render());
        }
    }
});
var nameViewList = new NameViewList({el : $("div#container")});

Answer 1

您的代码中有很多错误。你知道其中一个而不是其他人。

你所知道的是：

this.el.html(template);

视图的el只是一个DOM节点，并且没有html功能。您尝试使用的html功能是jQuery的一部分，因此您希望在this.$el上调用它（这只是$(this.el)的缓存版本）：

this.$el.html(template);

其他问题：

你的小提琴在整个地方遗失var;不要说：
```
NameModel = ...
```
说：
```
var NameModel
```
避免偶然的全局变种。
您的NameView很奇怪。它有tagName: 'li'，所以可能应该创建列表元素，但render不对视图el做任何事情，它只返回一个HTML字符串最终在<div>内。 <div>应该是<ul>：
```
<ul id="list"></ul>
```
render功能通常会填充视图el，并允许链接，返回this：
```
render: function() {
    var template = _.template('<%= name %>');
    this.$el.html(template(nameModel.toJSON()));
    return this;
}
```
您正在错误地使用下划线_.template。你以前可以说：
```
var h = _.template(template_source, data);
```
编译模板并在一步中填写as of Underscore 1.7，_.template的第二个参数是一个选项对象。现在，您需要在单独的步骤中编译和填写模板：
```
var t = _.template(template_source);
var h = t(data);
```
您将在render上方看到此更改。
您使用NameView的方式很奇怪。显然，您正在尝试使用一个NameView来处理多个名称，这适用于您的奇怪NameView#render实施，但一旦NameView有任何操作或NameView，它就会崩溃更新（如上所述）更为传统。您应为每个要显示的名称创建一个NameView，并且每个NameView都应拥有自己的NameModel作为其model属性。这会使NameView#render看起来像：
```
render: function() {
    var template = _.template('<%= name %>');
    this.$el.html(template(this.model.toJSON()));
    return this;
}
```
和NameViewList#addName看起来像：
```
addName: function() {
    var name = this.$("#Name").val();
    if(name.trim().length > 0) {
        var nameView = new NameView({
            model: new NameModel({ name: name })
        });
        this.$('#list').append(nameView.render().el);
    }
}
```
您注意到我们正在使用NameView#render的新返回值，这种x.append(v.render().el)模式在Backbone中非常常见和惯用，所以这是一个很好的做法。您还应该注意到，使用视图的this.$功能，搜索#list现在仅限于视图el; this.$('#list')相当于this.$el.find('#list')，以这种方式做事可以帮助您保持观点自包含。

在现实生活中，您可能会将new NameModel({ name: name })个实例放在某个集合中，而该集合上的事件会触发创建新的NameView。

将所有这些应用到你的小提琴中，可以为你提供这个功能更实用的版本：

http://jsfiddle.net/ambiguous/8x0ma9qo/

我的骨干样本不起作用，并且使用this.el.html不是一个函数

1 个答案: