下划線模板不適用於骨干視圖

Question

我不確定為什么我的下划線模板沒有呈現。 我希望它根據返回的數據顯示3 select下拉菜單。

這是我的代碼的擺弄。 檢查控制台中的數據： http : //jsfiddle.net/f7v3g/

如果您看到返回的數據，則會看到以下結構

-楷模

--attributes

---尺寸

---- object0

-----名稱（將是第一個下拉菜單旁邊顯示的文本標簽）

-----精煉（精煉的子代應為option標簽）

---- object1

-----名稱（將是第二個下拉菜單旁邊顯示的文本標簽）

-----精煉（精煉的子代應為option標簽）

----對象2

-----名稱（將是出現在第三個下拉菜單旁邊的文本標簽）

-----精煉（精煉的子代應為option標簽）

這是主干JavaScript：

(function () {

    var DimensionsModel = Backbone.Model.extend({

        defaults: {
            dimensionName : 'undefined',
            refinements : 'undefined'
        }

    });

    var DimensionsCollection = Backbone.Collection.extend({
        model: DimensionsModel,

        url: 'http://jsonstub.com/calltestdata',

    });

    var setHeader = function (xhr) {
        xhr.setRequestHeader('JsonStub-User-Key', '0bb5822a-58f7-41cc-b8a7-17b4a30cd9d7');
        xhr.setRequestHeader('JsonStub-Project-Key', '9e508c89-b7ac-400d-b414-b7d0dd35a42a');
    };

    var DimensionsView = Backbone.View.extend({
        el: '.js-container',

        initialize: function (options) {
            this.listenTo(this.model,'change', this.render);

            this.model.fetch({
                beforeSend: setHeader
            });

            console.log(this.model);

            return this;
        },

        render: function () {
            this.$el.html( this.template(this.model, 'dimensions-template') );
        },

        template: function (models, target) {
            var templateSelectors = _.template($('#'+target).html(),{
                dimensions: this.model
            });

            return templateSelectors;
        },

    });

    var myCollection = new DimensionsCollection();
    var myView = new DimensionsView({model: myCollection});

}());

這是我的HTML和Underscore模板：

<div class="js-container">

    <script type="text/template" id="dimensions-template">
        <% _.each(dimensions, function(dimension,i){ %>

            <%- dimension.get('dimensionName') %> <select id="<%- dimension.get('dimensionName') %>">
                <option>Select</option>
                <%  _.each(dimension.get('refinements'), function(ref,x){ %>
                    <option data-refineurl='{
                        "refinementUrl": "<%- ref.refinementurl %>",
                        "nVal": "<%- ref.nval %>"
                    }'><%- ref.name %></option>
                <% }); %>
            </select>

        <% }); %>
    </script>

</div>

編輯：拼寫和數據結構的示例。

Answer 1

我看到一些錯誤：

1）在DimensionsView初始化內，您應該添加一個this.render調用

2）在template：函數（模型，目標）內部，您使用this.models。 但是您將模型作為第一個參數傳遞了嗎？

3）您是否在某處將模型添加到集合中？ 現在您的模板將嘗試遍歷它們。 因此，需要模型在集合中循環。