1

ボタンを押すたびにデータが追加され、ページがリロードされ、リストが消えます。preventdefault は機能しましたが、ボタンをクリックするたびにリストに追加され続けます。

リストをクリアして、ボタンをクリックするたびに最初からやり直すにはどうすればよいですか?

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



    }
});
4

2 に答える 2

1

もう1つ試してみる必要があるのは、オブジェクトでいっぱいのデータ属性を持つモデルを作成する代わりに、「リンク」などのコレクションと「リンク」というモデルを作成することです。モデルを表示するには、コレクションをビューとレンダリング呼び出しに渡すことができます。

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オブジェクトで応答する必要があります。バックボーンは、それ自体の中でリンクモデルをインスタンス化するように注意します。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=リンクのリストが必要です。私たちが今しなければならないのは、LinkViewを作成することだけです

var LinkView = Backbone.View.extend({
  template: JST['teams/team'],
  tagName: 'li',

  render: function(){
    $(this.el).html(this.template({model: this.model}));
    this}})

お役に立てれば！

于 2013-02-26T03:14:51.227 に答える
1

その理由は、ボタンをクリックするたびに、ビュー全体が再度レンダリングされ、既存のコンテンツに追加されるためです。これで問題が解決します：

// empty the content inside the $el and re-rendering.
this.$el.empty();
this.$el.find('ul').append(li);
于 2013-02-25T10:10:51.450 に答える