Событие смены магистрали не запускается - PullRequest
Новая
       15

Событие смены магистрали не запускается

1 голос
/ 16 марта 2012

Я изучаю Хребет и ударил в одном месте. Я хотел загрузить модель при загрузке страницы. Итак, у меня есть код ниже. 

<html>
<head>
    <script src="js/jquery.min.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="js/backbone-min.js"></script>
    <script src="js/json2.js"></script>
</head>
<body>
    <h1></h1>
    <div id="poview"></div>
    <script id="poTemplate" type="text/template">
        <td><%= Ponumber %></td>
        <td><%= Posuppliername %></td>
        <td><%= Postatusname %></td>
        <td><%= Podate %></td>
        <td><%= DispOrderTotal %></td>
    </script>
    <script type="text/javascript">
        (function($) {
            var PO = Backbone.Model.extend()

            var POList = Backbone.Collection.extend({
                url: 'po.json',
                model: PO,
                parse: function(response) {
                    console.log(response.PurchaseOrder)
                    return response.PurchaseOrder
                }
            })

            var POView = Backbone.View.extend({
                tagName: 'tr',
                template: $('#poTemplate').html(),
                initialize: function() {
                    _.bindAll(this, 'render')
                    this.model.bind('change', this.render)
                },
                events: {
                    'click': 'click'
                },
                render: function() {
                    console.log('po render')
                    var tmpl = _.template(this.template)
                    $(this.el).html(tmpl(this.model.toJSON()))
                    return this;
                },
                click: function() {
                    console.log('clicked....')
                }
            })

            var POListView = Backbone.View.extend({
                el: $('#poview'),
                initialize: function() {
                    _.bindAll(this, 'render', 'appendPO')
                    this.collection = new POList()
                    this.collection.bind('change', this.render, this)
                    this.collection.bind('add', this.render, this)
                    this.collection.fetch({add:true})
                },
                render: function() {
                    var self = this;
                    console.log(this.collection.models)
                    this.collection.each(function(po) {
                        self.appendPO(po)
                    }, this)
                },
                appendPO: function(po) {
                    var poView = new POView({
                        model: po
                    });
                    console.log(po)
                    $(this.el).append(poView.render().el)               
                }
            });

            var poListView = new POListView()

        })(jQuery)
    </script>
</body>
</html>

А ниже - ответ json от сервера 

{
    "@totalCount": "1134",
    "PurchaseOrder": [
        {
            "ID": "689600",
            "Ponumber": "K037412201",
            "Poname": "",
            "Podate": "2011-12-26T10:03:24.000+05:30",
            "Posuppliername": "XYZ UPS Supplier",
            "Postatusname": "Approved - Supplier Received",
            "DispOrderTotal": "$1.99"
        },
        {
            "ID": "689601",
            "Ponumber": "K037412202",
            "Poname": "",
            "Podate": "2011-12-26T10:03:24.000+05:30",
            "Posuppliername": "ABC UPS Supplier",
            "Postatusname": "Approved - Supplier Received",
            "DispOrderTotal": "$1.99"
        }
    ]
}

Но при загрузке страницы метод визуализации в POListView не запускается. Что является проблемой в этом коде?

Редактировать 

jQuery(function($){
  ...
});

Если я также использую вышеупомянутое соглашение, это не работает.

Рабочий пример См ответ от @JayC 

<html>
<head>
    <script src="js/jquery.min.js"></script>
    <script src="js/underscore.js"></script>
    <script src="js/backbone.js"></script>
    <script src="js/json2.js"></script>
</head>
<body>
    <h1></h1>
    <div id="poview"></div>
    <script id="poTemplate" type="text/template">
        <td><%= Ponumber %></td>
        <td><%= Posuppliername %></td>
        <td><%= Postatusname %></td>
        <td><%= Podate %></td>
        <td><%= DispOrderTotal %></td>
    </script>
    <script type="text/javascript">

        jQuery(function($) {
            var PO = Backbone.Model.extend({
                idAttribute: 'ID'
            })

            var POList = Backbone.Collection.extend({
                url: 'po.json',
                model: PO,
                parse: function(response) {
                    console.log('parse')
                    return response.PurchaseOrder
                }
            })

            var POView = Backbone.View.extend({
                tagName: 'tr',
                template: $('#poTemplate').html(),
                initialize: function() {
                    _.bindAll(this, 'render', 'click')
                },
                events: {
                    'click': 'click'
                },
                render: function() {
                    var tmpl = _.template(this.template)
                    $(this.el).html(tmpl(this.model.toJSON()))
                    return this;
                },
                click: function() {
                    console.log('clicked.... ' + this.model.id)
                }
            })

            var POListView = Backbone.View.extend({
                el: $('#poview'),
                initialize: function() {
                    _.bindAll(this, 'render', 'appendPO')
                    this.collection = new POList()
                    this.collection.bind('reset', this.render, this)
                    this.collection.fetch()
                },
                render: function() {
                    var self = this;
                    console.log(this.collection.models)
                    this.collection.each(function(po) {
                        self.appendPO(po)
                    }, this)
                },
                appendPO: function(po) {
                    var poView = new POView({
                        model: po
                    });
                    $(this.el).append(poView.render().el)               
                }
            });

            var poListView = new POListView()

        });
    </script>
</body>
</html>

Ответы [ 2 ]

5 голосов
/ 16 марта 2012

Я не вижу привязки к событию reset для вашей коллекции.Документация Backbone.js теперь содержит часто задаваемые вопросы, в которых объясняются события (наконец-то!) , и из этого видно, что событие reset возникает при замене всего содержимого коллекции.В коллекциях это то, что обычно делает fetch.

0 голосов
/ 16 марта 2012

Вы написали это, что выполняет функцию немедленно, когда DOM еще не готов / недоступен: 

(function($){
  ...
})(jQuery);

Но, вероятно, вы хотели написать это (см. http://api.jquery.com/jQuery/#jQuery3), что задерживает функцию до тех пор, пока документ не будет готов к манипулированию (присоедините ваши представления и т. Д.): 

jQuery(function($){
  ...
});

Конечно, только * фактический вызов инициализации должен быть заключен в jQuery(), остальные части могут оставаться в простом закрытии.

...