可以通过骨干集合来查看错误字符串不是一个函数

时间:2014-09-30 14:24:50

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

我是骨干的新手,试图将一个集合直接发送到视图模板,但我失败了。键入错误,表示字符串不是函数。我知道我正确地回复了我的收藏品,也许我采取了错误的方式将我的收藏品传递到视野中。无论如何,帮助将是欣赏。

这里是我的观看代码

var EncoursView = Backbone.View.extend({
   el: "#contentEncours", //Container div
   template: "tpl/EncoursView.html",
   initialize: function () {
                  console.log('Encours View Initialized');
                  this.collection.fetch();
                  console.log(this.collection);
               },
   render: function () {
                  $(this.el).empty();
                   var that = this;
                  //Fetching the template contents
                  $.get(this.template({lists:this.collection}), function (template) {
                    that.$el.html(template); //adding the template content.
                  }, 'html');

                  return that;
           }
});

这是我试图迭代我的​​收藏品的视图

<script>
_.templateSettings = {
    evaluate: /\{\{(.+?)\}\}/g,
    interpolate: /\{\{=(.+?)\}\}/g,
    escape: /\{\{-(.+?)\}\}/g
};
    {{ _.each(items, function(item) { }}
        <ul>
            <li>Isin: {{= item.isinCode }}</li>
        </ul>
    {{ }); }}
</script>

在我的路线中我调用此函数我将集合传递给我的视图并调用渲染

remencour: function(){
   var collectionSupport = new SupportCollection();
   this.encoursView = new EncoursView({collection:collectionSupport});
   this.encoursView.render();
}

1 个答案:

答案 0 :(得分:1)

我猜这个:

$.get(this.template({lists:this.collection}), function (template) {
    that.$el.html(template); //adding the template content.
}, 'html');

用于从服务器检索模板源(tpl/EncoursView.html),将其填入,然后将其插入到视图el中。

这里有几个问题。

    当您尝试将其称为函数时,
  1. this.template'tpl/EncoursView.html'字符串。

  2. $.get期望将网址作为其第一个参数。

  3. $.get回调中,template应该是模板来源(一旦你走得那么远)。

  4. 您的模板:

    {{ _.each(items, function(item) { }}
        <ul>
            <li>Isin: {{= item.isinCode }}</li>
        </ul>
    {{ }); }}
    

    与您尝试提供的数据不匹配。

  5. 你拥有所有正确的作品,他们不在正确的地方。

    1 2 很简单,只需将$.get模板网址作为其第一个参数即可。 3 也很容易处理:在回调中编译模板。 4 也不是那么困难,提供模板序列化数据并确保传递给模板函数的名称与模板使用的名称相匹配:

    $.get(this.template, function(template) {
        var tmpl = _.template(template);
        var html = tmpl({ items: that.collection.toJSON() });
        // ---------------^^^^^------------------^^^^^^^^
    }, 'html');
    

    ,模板看起来和现在一样。

    toJSON调用为您提供了一系列对象,这有助于您避免意外更改模板内的任何内容。这是Backbone的标准做法。