主干-将$el.html连接到javascript函数

我在主干视图javascript文件中有以下代码：

var addPlayerView = Backbone.View.extend({
    tagName: "div",
    model: Player,
    id: 'addPlayerDiv',

    initialize: function() {
        console.log('addPlayerView has been created');
        //this.listenTo(this.model, "change", this.render);
    },

    render: function (){
        this.$el.html('<div class="container"></div><div id="myform"><b>Add New Player to Roster for Team X</b><form>'
        +'<p><input type="text" name="player[firstName]" value="First Name">'
        +'<p><input type="text" name="player[lastName]" value="Last Name"><p>'
        +'<input type="text" name="player[age]" value="Age"><p>'
        +'<input type="text" name="player[shirtNumber]" value="Shirt Number"><p>'
        +'<input type="text" name="player[email]" value="Email"><p>'
        +'<input type="text" name="player[phone]" value="Phone"><p>'
        +'<input type="submit" value="Submit"><FORM><INPUT Type="button" VALUE="Cancel" onClick="addThePlayer(event)"></FORM></form>'
        +'</div></div>');
        return this;
    }
});

var addPlayerView=Backbone.View.extend({
标记名：“div”，
型号：播放器，
id:'addPlayerDiv'，
初始化：函数（）{
log（'addPlayerView已创建'）；
//this.listenTo（this.model，“change”，this.render）；
},
渲染：函数（）{
此.$el.html（'为X队的花名册添加新球员'
+“”
+“”
+“”
+“”
+“”
+“”
+''
+'');
归还这个；
}
});

两个问题

（1） 有没有比在this.$el.html函数中转储所有html代码更好的方法？那真难看

（2） 如何将函数附加到this.$el.HTML函数中的HTML代码？它只是硬编码的吗？如何将“addThePlayer（event）”函数传递给我的播放器数据

---

这太疯狂了。我在黑暗中摸索。

你所需要做的就是创建一个模板 大概是这样的：

var template = _.template('<div class="container"></div><div id="myform"><b>Add New Player to Roster for Team X</b><form>'
        +'<p><input type="text" name="<%player[firstName]%>" value="First Name">'
        +'<p><input type="text" name="<%player[lastName]%>" value="Last Name"><p>'
        +'<input type="text" name="<%player[age]%>" value="Age"><p>'
        +'<input type="text" name="<%player[shirtNumber]%>" value="Shirt Number"><p>'
        +'<input type="text" name="<%player[email]%>" value="Email"><p>'
        +'<input type="text" name="<%player[phone]%>" value="Phone"><p>'
        +'<input type="submit" value="Submit"><FORM><INPUT Type="button" class="InputButton" VALUE="Cancel" "></FORM></form>'
        +'</div></div>')
this.$el.html(template(player));

render: function () {
    var playerTemplate = document.getElementById('player-template').innerHTML;
    this.$el.html(_.template(playerTemplate)());
}

events: {
    'submit #myform': 'onPlayerAdd',
    'click #cancel-add': 'cancelPlayerAdd' // <-- THIS.
}

希望这有帮助：）

（1） 有没有比把所有html代码都放进去更好的方法 这个.el.html函数是什么？那真难看

对。只需将HTML代码移动到模板中。正如您所说，将HTML与JavaScript混合在一起很难看，而且容易出错。例如，HTML标记中有几个问题，一个是一个

在另一个

中 因此，请使用

定义模板：

---

（2） 如何将函数附加到 这是一个.el.html函数吗？它只是硬编码的吗？我怎么通过 “添加播放器（事件）”功能我的播放器数据

在视图中定义属性

events

，并在提交表单时附加回调函数

events: {
    'submit #myform': 'onAddPlayer'
},

//
onAddPlayer: function (event) {
    event.preventDefault(); // so that the form is not actually submitted.

    var $form = $(event.currentTarget);

    var data = $form.serialize(); // <-- this is where you have your player data.
}

不要忘记在CancelPlayeradd上定义函数

取消按钮将获取标识符

取消添加
：

<input type="button" id="cancel-add" value="Cancel" />



熟悉不会有什么坏处。
您是否尝试过将其放入模板中？我会尝试一下-模板是这两个问题的解决方案吗？您可以使用主干模型这样做，并像其他主干视图一样将其传递给视图为什么在模板中使用模板标记（
）？我认为
name
属性应该只是字符串
player[firstName]
。即使调用了替换，您也希望使用
而不是求值语法（
）。非常感谢，这非常有效。我现在遇到的一个问题是，我可以在提交视图后“销毁（）”该视图，但之后我无法再次显示相同的视图-我只能显示一次。第二个问题是，我不知道如何“取消”视图——意思是——我想把这个“事件：{'submit#myform'：'onAddPlayer'，'cancel#myform'：'cancelAddPlayer'}”放在这里，但取消不起作用。如果你能在这些方面给我一些建议，我会很有帮助的，谢谢@关于第一部分。首先，如何显示视图？请分享你的代码。您需要创建视图的新实例来显示它，如下所示：
newaddplayerview（）
。至于如何处理取消，请参阅更新答案的第三部分。
events: {
    'submit #myform': 'onPlayerAdd',
    'click #cancel-add': 'cancelPlayerAdd' // <-- THIS.
}

<input type="button" id="cancel-add" value="Cancel" />