javascript - Backbone.js 什么都不渲染，除非手动

Question

当加载页面时，似乎没有任何 JS 启动，但是当我手动执行时

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

一切似乎都在按预期进行。我的第一个想法是，当某些脚本首次启动时，可能某些脚本“丢失”了，因为其中一些脚本是通过 asp.net mvc RenderAction() 加载的。但我不确定。

订单.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("Index", "Merida (or AgfaRis)", new { area = "_Systems"});这些是观点。

爱克发(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() 被隐式调用，因为在 View 上设置了模型，并且该模型绑定(bind)到 View 的 render() 函数。

更具体地说，在初始化 View 时，您通常会进行调用，将 View 的 render() 函数绑定(bind)到正在设置/更改的模型，如下所示:

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

每当模型发生变化时，都会触发一个 change 事件，它会触发您的 View 并调用 render()。

但是，在您的情况下，您似乎只使用了 Backbone 的 View 功能，没有使用 Model 的东西...因此，使您的东西呈现的最简单方法是在您之后添加一个显式调用以在 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>