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 ("Index", "Merida (или AgfaRis)) ", new {area =" _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().

Тем не менее, в вашем случае вы, похоже, используете только функциональность View Backbone, но не модель 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>