每次按下按钮时，清除视图并重新开始 - 骨干.js

every time the button is pressed clear the view and start again - backbone.js

本文关键字：视图 重新开始 js 骨干 清除 按钮      更新时间：2023-09-26

每次我按下按钮时，它都会添加我的数据并重新加载页面，列表就会消失。预防默认有效，但每次我单击按钮时，它都会不断添加到列表中。

如何清除列表并在每次单击按钮时重新开始？

.HTML 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="Scripts/underscore.js"></script>
    <script type="text/javascript" src="Scripts/backbone.js"></script>
</head>
<body>
    <div>
        <div id="container">
            <button>Load</button>
            <ul id="list"></ul>
        </div>
        <div id="list-template">
            <li><a href=""></a></li>
        </div>

        <script type="text/javascript" src="JavaScript.js"></script>

    </div>
</body>
</html>

JavaScript

model = new Backbone.Model({
    data: [
        { text: "site 1", href: "link1.htm" },
        { text: "site 2", href: "link2.htm" },
        { text: "site 3", href: "link3.htm" },
        { text: "site 4", href: "link4.htm" },
        { text: "site 4", href: "link4.htm" },
        { text: "site 4", href: "link4.htm" },
        { text: "site 4", href: "link4.htm" },
    ]
});
var View = Backbone.View.extend({
    initialize: function () {
        //console.log('initializing ' + this.options.blankOption);
        this.template = $('#list-template').children();
    },
    el: '#container',
    events: {
        'click button' : 'render'
    },
    //model:model,
    render: function(event){
        //event.preventDefault();
        var data = this.model.get('data');
        for (var i = 0; i < data.length; i++) {
            var li = this.template.clone().find('a').attr('href', data[i].href).text(data[i].text).end();
            this.$el.find('ul').append(li);
        }

    }
});

原因是每次单击该按钮时，整个视图都会再次呈现并追加到现有内容中。 这将解决您的问题：

// empty the content inside the $el and re-rendering.
this.$el.empty();
this.$el.find('ul').append(li);

您应该尝试的另一件事是，与其创建具有充满对象的数据属性的模型，不如创建一个名为"链接"的集合和一个名为"链接"的模型。若要显示模型，可以将集合传递到视图并在呈现调用中传递：

this.collection.each(function(model){$el.find('ul').append('<li><a href="' + model.get("href") + '">' + model.get('text') + '</a></li>')})

您可以通过创建另一个视图来改善这一点，只是为了显示模型的"tagName"属性设置为"li"。

例如，在这里，我将创建一个模型和一个集合来保存模型。然后，我将创建 2 个视图，一个用于保存集合，另一个用于显示模型。

var Link = Backbone.Model.extend({})
var Links = Backbone.Collection.extend({
  model: Link
  url: '/links'

}(;

var ls = new Links()

当您调用ls.fetch()时，将调用您的服务器，该服务器应使用包含所有链接的 JSON 对象进行应答。Backbone 将注意在自身内实例化 Link 模型。您可以通过执行应返回大于零的值ls.length来检查它是否有效。

然后，您可以创建如下所示的视图：

var MainView = Backbone.View.extend({
  template: JST['teams/index']
  render: function(){
      $(this.el).html(this.template())
      this.collection.each(this.appendLink())
      this},
  appendTeam: function(model){
    view = new LinkView({model: model})
    $('#links').append(view.render().el)
    this}})

模板函数应该有一个列表，其中包含 id = 链接，我们可以在其中附加我们的模型。我们现在要做的就是创建一个链接视图

var LinkView = Backbone.View.extend({
  template: JST['teams/team'],
  tagName: 'li',
  render: function(){
    $(this.el).html(this.template({model: this.model}));
    this}})

希望这有帮助！

相关文章：