除了手动时,Backbone.js没有任何渲染

时间:2012-01-23 13:22:22

标签: javascript asp.net-mvc-3 backbone.js

当加载页面时,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>

有什么好主意吗?

1 个答案:

答案 0 :(得分:4)

嗯......似乎它没有渲染,因为你从未真正调用t.render()。在大多数Backbone示例中,隐式调用render(),因为在视图上设置了模型,并且该模型与视图的render()函数相关联。

更具体地说,在初始化视图时,您通常会调用一个调用,将视图的render()函数绑定到正在设置/更改的模型,如下所示:

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

每当模型发生变化时,都会触发change事件,触发您的观看并调用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>