Backbone.js的沒有呈現除非手動

Question

當裝載了JS的頁面似乎沒有踢的，但是當我做手工

var foo = new TrollMann; 
foo.render(); 

事情似乎因爲它應該工作。我的第一個想法是，當某些腳本第一次觸發時，可能某些腳本「缺失」，因爲其中一些腳本是通過asp.net mvc RenderAction（）加載的。但我不知道。

Order.cshtml：

<script type="text/javascript"> 
     $(function() { 
      window.ApplicationInfo = Backbone.Model.extend({ 
      }); 

      window.Trollmann = Backbone.View.extend({ 
       initialize: function() { 
        _.bindAll(this, 'render', 'wizardMethod'); 
       }, 

       render: function() { 
        this.wizardMethod(); 
        return this; 
       }, 

       wizardMethod: function() { 
        var myModel = new ApplicationInfo; 
        var steps = [ 
        { 
        step_number: 1, 
        title: "Agfa Ris", 
        view: new AgfaRis({ model: myModel }) 
       }, 
        { 
         step_number: 2, 
         title: "Merida", 
         view: new Merida({ model: myModel }) 
        } 
       ]; 

        var view = new TilgangTrollmann({ 
         model: myModel, 
         steps: steps 
        }); 
        $("#current_step").html(view.render().el); 
        console.log("asd"); 
       } 
      }); 

      window.TilgangTrollmann = Backbone.View.extend({ 
       id: 'trollmann', 
       template: _.template($("#trollmann-template").html()), 

       events: { 
        "click #next_step_btn": "nextStep", 
        "click #prev_step_btn": "prevStep" 
       }, 

       initialize: function() { 
        _.bindAll(this, 'render'); 
        this.currentStep = 0; 
       }, 

       render: function() { 
        $(this.el).html(this.template); 
        this.progressIndicator = this.$("#progress_indicator"); 
        this.title = this.$("h2#step_title"); 
        this.currentStepcontainer = this.$(".current_step_container"); 
        this.nextStepBtn = this.$("#next_step_btn"); 
        this.prevStepBtn = this.$("#prev_step_btn"); 
        this.renderCurrentStep(); 
        return this; 
       }, 

       renderCurrentStep: function() { 
        var currentStep = this.options.steps[this.currentStep]; 
        if (!this.isFirstStep()) var prevStep = this.options.step[this.currentStep - 1]; 
        var nextStep = this.options.steps[this.currentStep + 1]; 

        this.title.html(currentStep.title); 
        this.currentView = currentStep.view; 
        console.log("asd"); 
        this.currentStepcontainer.html(this.currentView.render()); 
        console.log("asd2"); 

        this.renderProgressIndicator(); 

        if (prevStep) { 
         this.prevStepBtn.html("Forrige: " + prevStep.title).show(); 
        } else { 
         this.prevStepBtn.hide(); 
        }; 

        if (nextStep) { 
         this.nextStepBtn.html("Neste: " + nextStep.title); 
        } else { 
         this.nextStepBtn.html("Fullfør"); 
        }; 
       }, 

       renderProgressIndicator: function() { 
        this.progressIndicator.empty(); 
        _.each(this.options.steps, _.bind(function (step) { 
         var text = "(" + step.step_number + ") " + step.title + ">>> "; 
         var el = this.make('span', {}, text); 
         if (step.step_number == this.currentStep + 1) $(el).addClass('active'); 
         this.progressIndicator.append(el); 
        }, this)); 
       }, 

       nextStep: function() { 
        if (this.currentView.validate()) { 
         if (!this.isLastStep()) { 
          this.currentView.validate(); 
          this.currentStep += 1; 
          this.renderCurrentStep() 
         } else { 
          this.save(); 
         }; 
        }; 
       }, 

       prevStep: function() { 
        if (!this.isfirstStep()) { 
         this.currentStep -= 1; 
         this.renderCurrentStep(); 
        }; 
       }, 

       isFirstStep: function() { 
        return (this.currentStep == 0); 
       }, 

       isLastStep: function() { 
        return (this.currentStep == this.options.steps.length - 1); 
       } 
      }); 

      var t = new Trollmann(); 
     }); 
    </script> 

模板：

<script type="text/template" id="trollmann-template"> 
    <div id="progress_indicator"></div> 
    <h2 id="step_title"></h2> 
    <div class="current_step_container"></div> 
    <div id="buttons"> 
     <a id="prev_step_btn" class="">Forrige:</a> 
     <a id="next_step_button" class="">Neste:</a> 
    </div> 
</script> 
<div id="current_step"></div> 

這些是使用被稱爲的RenderAction（ 「索引」， 「梅里達（或AgfaRis）」，新的{面積= 「_Systems」} ）;這些都是意見。

AgfaRis（index.cshtml）：

<script type="text/javascript"> 
    $(function() { 
     window.AgfaRis = Backbone.View.extend({ 
      template: _.template($("#agfaris-template").html()), 

      initialize: function() { 
       _.bindAll(this, "render"); 
       this.render(); 
      }, 

      render: function() { 
       $(this.el).html(this.template); 
      } 
     }); 
    }); 
</script> 

<script type="text/template" id="agfaris-template"> 
<p>AgfaRis</p> 
</script> 

梅里達（index.cshtml）：

<script type="text/javascript"> 
    $(function() { 
     window.Merida = Backbone.View.extend({ 
      template: _.template($("#merida-template").html()), 

      initialize: function() { 
       _.bindAll(this, "render"); 
       this.render(); 
      }, 

      render: function() { 
       $(this.el).html(this.template); 
      } 
     }); 
    }); 
</script> 

<script type="text/template" id="merida-template"> 
<p>Merida</p> 
</script> 

什麼好的建議？

Answer 1

嗯......它似乎不是渲染，因爲你從來沒有實際打電話t.render()。在大多數Backbone示例中，render()是隱式調用的，因爲在視圖上設置了模型，並且該模型與視圖的render()函數綁定。

更具體地說，初始化視圖，你通常不得不在您的視圖的render()功能結合到一個模型打電話時被設置/改變了，就像這樣：

initialize: function() { 
    this.model.bind('change', this.render, this); 
    // ... your init stuff here ... 
} 

每當模式改變時， change觸發您的視圖並致電render()的事件被觸發。

但是，在你的情況下，你似乎只使用Backbone的View功能，沒有模型的東西...所以最簡單的方法使你的東西呈現將是添加一個明確的調用，以在Order.cshtml渲染後您創建Trollmann，像這樣：

<script type="text/javascript"> 
    $(function() { 
     window.ApplicationInfo = Backbone.Model.extend({ 
     }); 

     window.Trollmann = Backbone.View.extend({ 
      ... 
     }); 

     window.TilgangTrollmann = Backbone.View.extend({ 
      ... 
     }); 

     var t = new Trollmann(); 
     // Add the following line 
     t.render(); 
    }); 
</script>