Question

我的backbone.js代码有什么问题？
当产品页面加载时，仅显示模型的默认值...
虽然在控制台中我看到正确的数据...

这是我的模特：

var app = app || {};
app.Product = Backbone.Model.extend({
    defaults: {
        coverImage: 'img/placeholder.png',
        id: null,
        name: 'Unknown',
        price: '100'
    }
});

收集：

var app = app || {};
app.ProductList = Backbone.Collection.extend({
    model: app.Product,
    url: 'php/listProducts.php'
});

有我的观点：

var app = app || {};
app.ProductItemView = Backbone.View.extend({
    template: _.template($('#productPage').html()), 

    initialize: function(options) {
        var id = options.id;
        this.model = new app.Product();
        this.collection = new app.ProductList();
        this.collection.fetch({
            success: function(collection){
                console.log(collection.toJSON());
                console.log('Collection models: ', collection.models[id-1]);
                this.model = collection.models[id-1];
                console.log('This model: ', this.model);
            }
        });

        this.render();
    },

    render: function () { 
        this.$el.html( this.template( this.model.attributes ) );
        return this; 
    }


});

路由器：

var app = app || {};
app.Router = Backbone.Router.extend({
    routes: {
        "product/:id": "productPageShow"
    },

    initialize: function () {
        this.$content = $("#product-list");
    },

    productPageShow: function(id) {
        app.prodItView = new app.ProductItemView({ id: id });
        this.$content.html(app.prodItView.el);
    }

});

$(function() {
    new app.Router();
    Backbone.history.start();
});

我的模板：

<div class="container">    
    <div id="product-list"></div>
</div>

<script id="productPage" type="text/template">
    <div>
        <img src="<%= coverImage %>" class="img-responsive" style="width:100%" alt="<%= name %>">
    </div>
    <div>
        <h2><%= name %></h2>
    </div>
    <div>
        <h3><%= price %></h3>
    </div>
</script>

控制台图片：

console image

Answer 1

这是因为'fetch'是异步操作，所以try { outputStream = new FileOutputStream("/sdcard/output1.txt"); Writer out = new OutputStreamWriter(outputStream); Point point; for (int i = 48; i <= 66; i++) { point = landmarks.get(i); int pointX = (int) (point.x * resizeRatio); int pointY = (int) (point.y * resizeRatio); Log.d(TAG, "My points:(" + pointX + "," + pointY + ")"); point = landmarks.get(i + 1); int pointXX = (int) (point.x * resizeRatio); int pointYY = (int) (point.y * resizeRatio); canvas.drawLine(pointX, pointY, pointXX, pointYY,mFaceLandmardkPaint); out.write(Integer.toString(pointX)); String h = ","; out.write(h); out.write(Integer.toString(pointY)); String j = ","; out.write(j); } out.write("\n"); out.close(); }将始终在render()调用success()回调之前调用。

如果你想要一些额外的资源：

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

http://backbonejs.org/#Model-fetch

用fetch()方法直观地解释代码的执行顺序：

initialize

修复应该相当简单，只需在成功回调的底部调用render方法并绑定到视图的正确上下文：

var app = app || {};
app.ProductItemView = Backbone.View.extend({
    template: _.template($('#productPage').html()), 

    initialize: function(options) {
        // 1
        var id = options.id;
        // 2
        this.model = new app.Product();
        // 3
        this.collection = new app.ProductList();
        // 4 - fetch is only called and ajax request is sent to your backend.
        //     success callback is still not called
        this.collection.fetch({
            success: function(collection) {
                // 6 - when you get the data from the server the callback is called
                //     but the page is already rendered at this time
                console.log(collection.toJSON());
                console.log('Collection models: ', collection.models[id-1]);
                this.model = collection.models[id-1];
                console.log('This model: ', this.model);
            }
        });

        // 5
        this.render();
    },

    render: function () { 
        this.$el.html( this.template( this.model.attributes ) );
        return this; 
    }
});

此外，正如一般建议..从不直接从集合中选择模型..在集合上使用提供的var app = app || {}; app.ProductItemView = Backbone.View.extend({ template: _.template($('#productPage').html()), initialize: function(options) { var id = options.id; this.model = new app.Product(); this.collection = new app.ProductList(); this.collection.fetch({ success: _.bind(function(collection) { console.log(collection.toJSON()); console.log('Collection models: ', collection.models[id-1]); this.model = collection.models[id-1]; console.log('This model: ', this.model); // Moved render call here this.render(); }, this) }); }, render: function () { this.$el.html( this.template( this.model.attributes ) ); return this; } });方法并传递您需要的模型get ..使用{{ 1}}超过id

模型视图仅显示默认值

1 个答案: