Question

我刚刚开始使用骨干网。我想将视图应用于按钮，但是当我在浏览器中打开文件时，那里什么都没有。

为什么按钮没有被渲染？

HTML：

   <!-- Scripts -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
  <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
  <script type="text/javascript" src="views/BaseButtonView.js"></script>

</head>

<body>

    <script type="text/template" id="button-test">
        <div id="test-buttons">
            <button class="cta-ajax">
                <p>send message</p>
                    <div class="spinner-container"></div>
            </button> 
        </div>
    </script>

</body>
</html>

查看：

    $(document).ready(function(){
    var ButtonView = Backbone.View.extend({

        el: $(".cta-ajax"),

        template: _.template($("#button-test").html()),

        initialize: function(){ 
            console.log("Started!");
        },

        render: function() {


            this.$el.html(this.template()); 
            console.log("rendered");
            return this; 
        }
    });

    var TView = new ButtonView();

});

Answer 1

您的代码有两个问题。这是一个有效的jsfiddle：http://jsfiddle.net/cj4zkyow/1/

问题1：

除了实现初始化功能外，您还需要在render内调用initialize。否则你必须手动调用渲染。

问题2：

第二个问题是您将视图的el属性设置为.cta-ajax，但该元素不存在。它是您模板的一部分。 el属性是视图附加到的元素。所以你需要使用DOM中存在的东西。

HTML：

// Need a element to append view to.
<div id="test"></div>

<script type="text/template" id="button-test">
    <div id="test-buttons">
        <button class="cta-ajax">
            <p>send message</p>
            <div class="spinner-container"></div>
        </button> 
    </div>
</script>

使用Javascript：

$(document).ready(function(){
    var ButtonView = Backbone.View.extend({
        // If you specify, el, it should be an element in the DOM, not in your template.
        el: $("#test"),

        template: _.template($("#button-test").html()),

        initialize: function(){ 
            // Need to call render in initialize function to render view.
            this.render();
        },

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

    var TView = new ButtonView();

});

在按钮的骨干视图不回报

1 个答案: