Backbone.js - 修改已渲染的页面

时间:2012-05-10 01:34:14

标签: node.js backbone.js pug

我正在尝试在(相对简单的)node.js webapp的上下文中学习jade模板系统和backbone.js。我正在使用express.js作为我的框架。无论如何,backbone.js看起来非常有趣和强大,但我不想在客户端渲染客户端。

我宁愿使用node和jade渲染服务器端,向客户端发送渲染页面,只使用backbone修改实时内容。最好的方法是什么?换句话说,对于已经渲染和结构化的页面使用骨干的最佳方法是什么?我意识到我并没有充分利用主干功能,但我只是尝试使用主干而不是一堆jQuery选择器和事件处理程序。

1 个答案:

答案 0 :(得分:7)

您的主干视图可以通过在实例化视图时将引用传递给元素el来引用现有DOM元素。

var myViewInstance = new MyViewClass({el: $('#existingDOMElement')});

您在视图类中声明的任何事件处理程序都将绑定到与事件选择器匹配的任何子元素。例如:

<html>
    <body>
        <div id='myView'>
            <a class='foo'>Foo</a>
        </div>

        <script>
            var MyViewClass = Backbone.View.extend({
                events: {
                    'click .foo': 'fooClicked'
                },
                fooClicked: function(e) {
                    e.preventDefault();
                    console.log('.foo clicked');
                }
            });

            new MyViewClass({el: $('#myView')});
        </script>

    </body>
</html>