骨干更改事件未触发

Question

骨干更改事件未触发

Jay*_*tel 1 javascript backbone.js backbone-events

我正在学习Backbone并在一个地方敲击.我想在页面加载时加载模型.所以我有下面的代码.

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

Run Code Online (Sandbox Code Playgroud)

以下是来自服务器的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"
        }
    ]
}

Run Code Online (Sandbox Code Playgroud)

但是当页面加载时,POListView上的渲染方法不会被触发.这段代码有什么问题？

编辑

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

Run Code Online (Sandbox Code Playgroud)

如果我也使用上述约定,则不起作用.

工作示例 请参阅@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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jay*_*ayC 5

我没有看到reset你的收藏对活动有约束力.该Backbone.js的文档现在有一个常见问题这也解释了事件(终于!) ,你可以从中看出,reset当收集的全部内容都被替换事件触发.在收藏品上,这就是fetch正常情况.

归档时间：	13 年，10 月前
查看次数：	2905 次
最近记录：	12 年，6 月前