0

我一直在尝试将我收集的数据显示到模板中。在我的休息控制台上，我可以看到集合已填充；但我无法在我的应用程序中做到这一点。代码如下： 在视图中，渲染是这样的：

  render : function() {
                var template = _.template(tpl,{
                       CollectionForTemplate: this.Collection.toJSON(),
                this.el.html(template);

                },

看来，调用fetch的函数如下：

  loadTariffGrids: function(){
                       //fetch done here
                          if (Collection.length > 0) {
                                _.each(Collection, function(Model) {
                                       JSON.stringify(Model);
                           alert(JSON.stringify(Model));
                                }, this);
                          };
                          this.render;
                       }});


             },

最后，模板是：

                       <span>
                       <%  _.each(CollectionForTemplate, function(model) { %>
                       </span>      
                       <td><%= model.cost %></td>

                        <%     }); %>

我哪里错了？

4

2 回答 2

0

在您的渲染中，只需使用：

CollectionForTemplate: this.Collection;

修改视图如下：

var self = this;
//fetch done here
if (Collection.length > 0) {
                            _.each(Collection, function(Model) {
                                   JSON.stringify(Model);
                            }, this);
};
self.Collection = Collection;
self.render;

我认为您传递给模板的集合没有被实例化。所以我在控制传递给 fetch 函数之前使用 self 来存储引用。我知道我的解释不好；我希望有经验的人为您提供更好的解释。希望这可以帮助

于 2012-08-16T12:29:51.130 回答
0

好的@Amateur让我们尝试正确解决您的需求。

注意：所有代码都写得很好，不要指望它开箱即用，以它为灵感。

首先，在模板中使用编程逻辑不是一个好主意，这只是一个设计决定，我不想在这里看起来很学术，但我认为如果你对此过于灵活，你可以完成一个非常困难的到维护代码。

所以，这个想法是制造数据，这样模板就不必做出任何决定/计算。如果你需要一个循环进入你的模板，让我们使用子模板。

我从您的代码示例中了解到，您有一个这样的集合：

[
  {
    "id": "1",
    "cost": 100,
    "name": "Amateur"
  },

  {
    "id": "2",
    "cost": 200,
    "name": "Other name"
  },

  {
    "id": "3",
    "cost": 300,
    "name": "Other name again"
  },
]

你想渲染这样的东西：

<table>
  <tr>
    <td>Name</td>
    <td>Cost</td>
  </tr>

  <tr>
    <td>Amateur</td>
    <td>100</td>
  </tr>

  <tr>
    <td>Other name</td>
    <td>200</td>
  </tr>

  <tr>
    <td>Other name again</td>
    <td>300</td>
  </tr>
</table>

正如我在您发送的另一个（重复的）问题中所读到的，您还希望只呈现cost，name == "Amateur"如下所示：

<table>
  <tr>
    <td>Name</td>
    <td>Cost</td>
  </tr>

  <tr>
    <td>Amateur</td>
    <td>100</td>
  </tr>

  <tr>
    <td>Other name</td>
    <td>--</td>
  </tr>

  <tr>
    <td>Other name again</td>
    <td>--</td>
  </tr>
</table>

迭代

对于迭代，我们将使用子模板来解决它。

主模板：

<script type="text/template" id="template-elements">
  <table>
    <tr>
      <td>Name</td>
      <td>Cost</td>
    </tr>
  </table>
</script>

子模板

<script type="text/template" id="template-element">
  <tr>
    <td><%= name %></td>
    <td><%= cost %></td>
  </tr>
</script>

为了使它更优雅，我们也使用 a Viewfor theCollection和 a SubViewfor each Model。

var MyModel = Backbone.Model.extend();
var MyCollection = Backbone.Collection.extend({
  model: MyModel
});

var MyModelView = Backbone.View.extend({
  template: _.template( $("#template-element").html() ),

  render: function(){
    this.$el.html( this.template( this.model.toJSON() ) );

    return this;
  }
});

var MyCollectionView = Backbone.View.extend({
  template: _.template( $("#template-elements").html() ),

  render: function(){
    this.$el.html( this.template() );

    this.collection.each( function( model ){
      var view = new MyModelView({ model: model });
      this.$el.find( "table" ).append( view.render().el );
    });

    return this;
  }
});

装饰器

我们已经解决了迭代问题，现在我们将实现隐藏Model.costwhen的逻辑Model.name != "Amateur"。

Model让我们实现一个方法，该方法返回已经为模板准备好的属性：

var MyModel = Backbone.Model.extend({
  toJSONCooked: function(){
    var json = this.toJSON();

    if( this.get( "name" ) != "Amateur" ) {
      json.cost = "--";
    }

    return json;
  }
});

我们可以使用这种方法来提供模板：

var MyModelView = Backbone.View.extend({
  template: _.template( $("#template-element").html() ),

  render: function(){
    this.$el.html( this.template( this.model.toJSONCooked() ) );

    return this;
  }
});
于 2012-08-17T12:39:40.703 回答