Question

我在Backbone View 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;
    }
});

两个问题。

（1）有没有更好的方法，只需将所有html代码转储到此。$ el.html函数中？那太难看了。

（2）如何将函数附加到此。$ el.html函数中的HTML代码？它只是硬编码吗？如何通过＆＃34; addThePlayer（事件）＆＃34;运行我的球员数据？

这很疯狂。我在黑暗中摸索着。

Answer 1

（1）有没有比仅仅转储所有html代码更好的方法这个。$ el.html功能？那太难看了。

是。只需将HTML代码移动到模板即可。正如你所说，将HTML与JavaScript混合是丑陋的，而且容易出错。例如，HTML标记中存在一些问题，一个问题是另一个问题<form>中有一个<form>。因此，使用<script type="text/html"></script>定义模板：

<script type="text/html" id="player-template">

    <div class="container">
        <b>Add New Player to Roster for Team X</b>
        <form id="myform">
            <p>
                <input type="text" name="player[firstName]" value="First Name" />
            </p>
            <p>
                <input type="text" name="player[lastName]" value="Last Name" />
            </p>
            <p>
                <input type="text" name="player[age]" value="Age" />
            </p>
            <p>
                <input type="text" name="player[shirtNumber]" value="Shirt Number" />
            </p>
            <p>
                <input type="text" name="player[email]" value="Email" />
            </p>
            <p>
                <input type="text" name="player[phone]" value="Phone" />
            </p>
            <p>
                <input type="submit" value="Submit" />
                <input type="button" value="Cancel" />
            </p>
        </form>
    </div>

</script>

然后，在addPlayerView中，使用此模板，如下所示：

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

（2）如何将函数附加到HTML中的HTML代码中这个。$ el.html功能？它只是硬编码吗？我怎么通过＆＃34; addThePlayer（事件）＆＃34;运行我的球员数据？

在视图中定义属性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.
}

（3）如何处理点击取消按钮？

为什么您的代码'cancel #myform': 'cancelAddPlayer'无效，而我submit的相同代码的作用是因为后者在提交表单时为a standard jQuery event。 没有名为cancel 的活动。因此，您只需处理单击取消按钮，并为此使用以下语法：'click #cancel-add': 'cancelPlayerAdd'。所以，为了把事情搞砸，你的events属性应该是这样的：

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

不要忘记定义函数onCancelPlayerAdd！

取消按钮将获得标识符cancel-add：

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

熟悉the events supported in jQuery并不会有什么坏处。

Answer 2

您需要做的就是创建一个模板像这样：

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));

对于＆＃34; addThePlayer＆＃34;函数，最好的办法是在视图中创建事件对象。这样的事情会起作用：

  events: {
    "click InputButton"         : "addThePlayer",
  },

希望这会有所帮助:)。

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

2 个答案: