Javascript 主干更改事件未触发_Javascript_Backbone.js_Backbone Events

Javascript 主干更改事件未触发

javascript backbone.js

Javascript 主干更改事件未触发,javascript,backbone.js,backbone-events,Javascript,Backbone.js,Backbone Events,我正在学习脊梁骨，在一个地方击打。我想在页面加载时加载模型。所以我有下面的代码 <html> <head> <script src="js/jquery.min.js"></script> <script src="js/underscore-min.js"></script> <script src="js/backbone-min.js"></script> <

我正在学习脊梁骨，在一个地方击打。我想在页面加载时加载模型。所以我有下面的代码

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

但当加载页面时，POListView上的render方法不会被激发。此代码中存在什么问题

编辑

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>


jQuery（函数（$）{
var PO=Backbone.Model.extend({
idAttribute:'ID'
})
var POList=Backbone.Collection.extend({
url:'po.json'，
型号:PO,，
解析：函数（响应）{
console.log（'parse'）
return response.PurchaseOrder
}
})
var POView=Backbone.View.extend({
标记名：“tr”，
模板：$（'#poTemplate'）.html（），
初始化：函数（）{
_.bindAll（此“渲染”、“单击”）
},
活动：{
“单击”：“单击”
},
render:function（）{
var tmpl=wu.template（this.template）
$（this.el）.html（tmpl（this.model.toJSON（））
归还这个；
},
单击：函数（）{
console.log（'clicked…'+this.model.id）
}
})
var POListView=Backbone.View.extend({
el:$（'poview'），
初始化：函数（）{
_.bindAll（这是'render'，'appendPO'）
this.collection=new POList（）
this.collection.bind（'reset'，this.render，this）
this.collection.fetch（）
},
render:function（）{
var self=这个；
log（this.collection.models）
此.collection.each（功能（po）{
self.appendPO（po）
}，本页）
},
附录po：功能（po）{
var poView=新poView({
型号:po
});
$（this.el）.append（poView.render（）.el）
}
});
var poListView=new poListView（）
});

您编写了这样一个函数，当DOM尚未就绪/可用时，它会立即执行该函数：

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

但您可能希望编写此文件（请参阅），这会延迟函数，直到文档准备好进行操作（附加视图等）：

当然，只有实际的初始化调用应该被包装到

jQuery（）

，其他部分可以保留在普通闭包中。

您编写了这篇文章，当DOM尚未就绪/可用时，它会立即执行函数：

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

但您可能希望编写此文件（请参阅），这会延迟函数，直到文档准备好进行操作（附加视图等）：

当然，只有实际的初始化调用应该包装到

jQuery（）

，其他部分可以保留在普通闭包中。

我没有看到对集合的

重置

事件的绑定。文档现在有一个解释事件的常见问题解答（最后！），您可以从中看到

当集合的全部内容被替换时，

reset

事件触发。在集合上，这就是

获取

通常所做的。

我没有看到对集合的

重置

事件的绑定。文档现在有一个解释事件的常见问题解答（最后！），您可以从中看到

当集合的全部内容被替换时，

reset

事件触发。在集合上，这是

获取

通常所做的。

不幸的是，这不起作用。我在render方法中也有未打印的日志输出。实际上，加载了足够的DOM。我已经看到了一些主干示例，其中ti initialize脚本放在正文的末尾，它们可以工作（事实上，我认为我的项目是这样工作的……所有定义都在顶部，但要初始化的脚本包含在底部）。我们为什么要这样做？我不确定。我在某个地方读到，添加多个DOMReady函数实际上会降低页面速度，但我不确定这是什么原因。不幸的是，这不起作用。我在render方法中也有未打印的日志输出。实际上，加载了足够的DOM。我已经看到了一些主干示例，其中ti initialize脚本放在正文的末尾，它们可以工作（事实上，我认为我的项目是这样工作的……所有定义都在顶部，但要初始化的脚本包含在底部）。我们为什么要这样做？我不确定。我在某个地方读到，添加多个DOMReady函数实际上会降低页面速度，但我不确定这是不是原因。太好了。它现在正在工作。我做了两个改变。@JayC建议使用重置事件并使用主干0.9.1而不是0.3.3。不确定0.3.3有什么问题。太好了。它现在正在工作。我做了两个改变。@JayC建议使用重置事件并使用主干0.9.1而不是0.3.3。不确定0.3.3有什么问题。

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