Jquery mobile 将主干集合绑定到前端的视图和下划线模板

我使用的是主干+jquery mobile，无法通过下划线模板将我的模型数组（集合）输出到UI

我的模型如下：

var shortcake = Backbone.Model.extend({

    defaults: function() {
      return {
        name: "No Slot", 
        butter: false, 
        time: "3pm",
        icon: "plus",
        deladd: "ADD"
      };
    },

    initialize: function() {
      this.bind("change:butter", function(){
      if (this.model.butter == false) {
        this.set({name: this.defaults.name});
      };
        }),
    }
});

var shortcakes = Backbone.Collection.extend ({
    model: shortcake
});

var shortcake1 = new shortcake({ name: "How Bizarre", butter: "true", time: "1", icon:"plus", deladd:"ADD" });
var shortcake2 = new shortcake({ name: "Sexual Healing", butter: "true", time: "1", icon:"plus", deladd:"ADD" });
var shortcakeAlbum = new shortcakes([ shortcake1, shortcake2]);

我的收藏如下：

var shortcake = Backbone.Model.extend({

    defaults: function() {
      return {
        name: "No Slot", 
        butter: false, 
        time: "3pm",
        icon: "plus",
        deladd: "ADD"
      };
    },

    initialize: function() {
      this.bind("change:butter", function(){
      if (this.model.butter == false) {
        this.set({name: this.defaults.name});
      };
        }),
    }
});

var shortcakes = Backbone.Collection.extend ({
    model: shortcake
});

var shortcake1 = new shortcake({ name: "How Bizarre", butter: "true", time: "1", icon:"plus", deladd:"ADD" });
var shortcake2 = new shortcake({ name: "Sexual Healing", butter: "true", time: "1", icon:"plus", deladd:"ADD" });
var shortcakeAlbum = new shortcakes([ shortcake1, shortcake2]);

我的看法是：

var shortcakeUI = Backbone.View.extend ({

    tagName: "li",
    template: _.template($('#shortcakeTemplate').html()),


    initialize: function(){
    this.render();
    },

    render: function() {
        var variables = { namee: name };
          if (this.model.butter == false) {
            this.model.deladd = "ADD";
            this.model.icon= "plus";
            this.el.html( template );
          }
          else {
                this.model.deladd = "DELETE";
            this.model.icon= "minus";
            this.el.html( template );
          }
        },

)};


var ShortcakeUI = new shortcakeUI({ 
collection : shortcakeAlbum, 
el: $("#shortcakeinterface")[0] 
});
ShortcakeUI.render();

我的html是：

    <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
        <div id="shortcakeinterface"></div>
    </ul>
<!---Templates--->
            <script id="shortcakeTemplate" type="text/template">
        <% for(var i = 0; i < shortcakeAlbum.length; i++){ %>
        <% var shortcakez = shortcakeAlbum[i]; %>

            <fieldset class="ui-grid-a">
                <div class="ui-block-a">

                    <h3><%= shortcakez.time %></h3>
                    <p><%= shortcakez.name %></p>      

                </div>

                <div class="ui-block-b">

                    <div id="8" data-role="controlgroup" data-type="horizontal" >
                       <a href="#" data-role="button" data-icon="<%= shortcakez.icon %>"><%= shortcakez.deladd %></a>
                       <a href="#" data-role="button" data-icon="plus">Test</a>
                    </div>

                </div>     
            </fieldset>
        <% } %>
        </script>

因此，有了这些，我的UI不会显示加载的模型列表。

---

从主干网和js开始，我在这里做什么？

您需要在render（）中将模型传递给模板

而不是

this.el.html( template );

这样做

$(this.el).html( this.template(this.model.toJSON()) ); 

---

或者

this.$el.html…

wich由于以下原因具有更好的性能。