Fatal编程技术网
  • button/
  • Button 按钮上的主干视图未渲染

Button 按钮上的主干视图未渲染

button backbone.js

Button 按钮上的主干视图未渲染,button,backbone.js,Button,Backbone.js,我刚开始使用主干网。我想对按钮应用视图，但当我在浏览器中打开文件时，那里什么都没有 为什么按钮没有被渲染 HTML: 您的代码有两个问题。下面是一个正在工作的JSFIDLE： 第1期： 除了实现初始化函数外，还需要在initialize中调用render。否则，必须手动调用render 第二期： 第二个问题是，您将视图的el属性设置为.cta ajax，但元素不存在。它是模板的一部分。el属性是视图附加到的元素。所以您需要使用DOM中存在的东西 HTML: 这就是你的全部密码吗？我认为您缺少视图

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

为什么按钮没有被渲染

HTML:

您的代码有两个问题。下面是一个正在工作的JSFIDLE：

第1期：

除了实现初始化函数外，还需要在
initialize
中调用
render
。否则，必须手动调用render

第二期：

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

HTML:

这就是你的全部密码吗？我认为您缺少视图的初始化，在您共享的代码中，它只是视图的声明。那么初始化函数做什么呢？您正在声明主干视图..但您没有初始化..类似于savebuttonView=new ButtonView（）…这实际上是将创建视图实例的行。如果您熟悉JSFIDLE，我建议您为此创建一个FIDLE，这样做会更容易。我已经这样做了，但是得到了一个下划线错误-
未捕获类型错误：无法读取未定义的属性“replace”
谢谢。这是有道理的。现在可以了。虽然在初始化
TView（）
后再次调用时，您会调用
render（）
两次。是的，这是一个输入错误。现在应该是固定的回答和小提琴了。如果在初始化中调用
render
，则不需要执行
TViewer（）.render（）
。我建议不要在初始化中调用render（）方法，而是在主流（TView.render（））中调用它。它使代码更具可读性（您可以看到初始化对象的位置以及在不进入对象内部的情况下渲染对象的位置）。“但那只是我的意见。”米罗诺说得对。我已经有一段时间没有使用主干了，所以我查看了一些旧的生产代码，并且在视图中显式地调用了
render（）
。 
   <!-- 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();

});

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

$(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();

});