下划线模板的订单级别,确保Backbone Collection的数据按设定顺序加载?

时间:2014-04-15 10:31:39

标签: javascript jquery backbone.js underscore.js underscore.js-templating

我在我的数据库中加载了基本文本数据的Underscore.JS模板。这些加载到两个div标签中。但我认为(我不确定,如果我错了请纠正我),这取决于Backbone首先得到的表取决于这些div标签的显示顺序。

所以(a),我想出了一个答案,我只是想知道天气与否这是通过“链接”(如果这是正确的调用方式)成功调用的最佳方式,在同一个Backbone View中,这会将两个div加载到相同的Underscore模板中。所以这是我目前的代码,

  var TextEditView = Backbone.View.extend({
    inititalize: function() {
        this.listenTo(this.BasicTextModel, "change", this.render);
    },
    el: $(".BasicTextTemplate"), //Template loader placeholder
    render: function() {
        var that = this;
        var AboutText = new TextAboutCollection(); //Get About page text
        var HomeText = new TextHomeCollection(); //Get Home page text

        HomeText.fetch({
            success: function(Text) {
                var GetHomeTxt = _.template( $('script.BasicText').html(), { Text: Text.toJSON() } ); //Load About text into template
                that.$el.append(GetHomeTxt);
                that.trigger('ChangeTxt', that);
                AboutText.fetch({
                    success: function(Text) {
                        var GetAboutTxt = _.template( $('script.BasicText').html(), { Text: Text.toJSON() } ); //Load About text into template
                        that.$el.append(GetAboutTxt);
                        that.trigger('ChangeTxt', that);
                    } //End of Success Call to AboutText
                }); //End of .fetch for AboutText
        }}); //End of Success & .fetch calls for HomeText
    } //End of render view function
}); //End of TextEditView

只有在完成hometext fetch的成功调用后才会加载AboutText,对吧?即使我没有得到这100%,它现在似乎也有效。

而且(b),是否有一种简单的方法可以为每个div标签添加“级别”或ID,以确保Underscore按照我想要的顺序加载每个标签?或者我是否完全错误并且应该将这些集合加载到他们自己的视图中指向那里有自己的模板?如果是这样,我不明白模板的要点?我现在拥有它们的方式,我只有一个我重复使用的模板!

如果我错了,请纠正我

谢谢,

1 个答案:

答案 0 :(得分:1)

编辑的编辑:

model = new Model({_id:id})               
   var fetched = model.fetch();

  // wait for the model to be fetched
  $.when(fetched).then(function(){

     view = new View({model:model})                               
     app.content.show(view)     
  });

来自https://stackoverflow.com/a/13601074/2535516


编辑:

这是指评论。 关于构建代码,我想你是指骨干项目的组织(如果我错了,请纠正我)。如果是这样,我的方式是按模块编写代码。一个模块基本上是:BackboneModel / Collection,View和下划线模板。

架构:

   /
        main.js
        About/ 
        -- about.html <-- contains the underscore template
        -- aboutView.js
        -- aboutModel.js
        -- aboutCollection.js
        Menu/
        -- menu.html
        -- menuView.js
        -- menuModel.js
        -- menuCollection.js

我通过AMD lib加载它,主要是require.js

这个架构是个人的,你会看到的是:

/
   main.js
   View/
   -- about.js
   -- menu.js
   Model/
   -- aboutModel.js
   -- menuModel.js
   Collection/
   -- aboutCollection.js
   -- menuCollection.js

一个很好的例子是TODOMvc architecture


您的代码可以使用,但这不是非常易读,如果您不得不添加一些提取内容会更糟糕:

HomeText.fetch({
     AboutText.fetch({
         Module1Text.fetch({
             Module2Text.fetch({
             });
         });
      });
 });

这是致电pyramid of doom。 为避免这种情况,请使用promises

作为备注,jquery do promises