view backbone.js hiển thị trước khi tìm nạp mẫu

Question

Tôi đang cố gắng tạo một ứng dụng backbone.js nhỏ, nhưng phải vật lộn với thứ tự của sự vật.

Trong file html của tôi, tôi có hai khối kịch bản trong tiêu đề:

<script type="text/template" id="model-template"> 
    <a href="#"><%= title %></a> 
</script> 

<script type="text/javascript"> 
    jQuery(function(){ 
    window.model.fetch(); 
    }); 
</script> 

Trong app.js của tôi, tôi đã xác định một mô hình đơn giản, xem và một router.

(function($) { 

window.MyModel = Backbone.Model.extend({ 
    url: '/mymodel' 
}); 

window.mymodel = new MyModel(); 

$(document).ready(function() { 

    window.MyModelView = Backbone.View.extend({ 
     template: _.template($('#mymodel-template').html()), 

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

     render: function() { 
      var renderedContent = this.template(this.model.toJSON()); 
      $(this.el).html(renderedContent); 
      return this; 
     } 
    }); 
}); 

window.MyApp = Backbone.Router.extend({ 
    routes: { 
     '': 'home' 
    }, 

    initialize: function() { 
     this.myModelView = new MyModelView({ 
      model: window.mymodel 
     }); 
    }, 

    home: function() { 
     var $body = $('body'); 
     $body.empty(); 
     $body.append(this.myModelView.render().el); 
    } 
}); 

$(function() { 
    window.App = new MyApp(); 
    Backbone.history.start({pushState: true}); 
}); 

})(jQuery); 

Ứng dụng được phục vụ bằng ứng dụng sinatra đơn giản. Url /mymodel phục vụ tệp json tĩnh:

{ 
    "title": "My Model", 
} 

Khi tải các ứng dụng, tôi nhận được một lỗi trong giao diện điều khiển javascript:

Uncaught ReferenceError: title is not defined 

Vấn đề có vẻ là, rằng quan điểm làm cho bản thân trước mô hình được lấy từ máy chủ. Tại sao vậy?

Hôm qua, tôi đã theo dõi hai lần phát sóng màn hình backbone.js đầu tiên từ PeepCode. Tôi đã cố gắng so sánh ứng dụng của mình với ứng dụng đã xuất hiện trên màn hình, nhưng không thể thấy lý do tại sao ứng dụng của tôi muốn hoạt động.

Mọi đề xuất?

Answer 1

Trong trường hợp này, bạn nên khởi động dữ liệu mô hình để có sẵn khi tải trang.

Thay vì

window.model.fetch(); 

đặt một cái gì đó như thế này trong (nếu sử dụng một .erb)

<script> 
    window.model = new MyModel(<%= @model.to_json %>); 
</script> 

Nếu không, bạn cần phải làm cho quan điểm sau khi mô hình được lấy ví dụ

ràng buộc quan điểm để render khi model thay đổi

initialize: function() { 
    _.bindAll(this, 'render'); 

    this.model.on("change", this.render); 
}, 

hoặc xử lý sự thành công của mô hình.tìm nạp và hiển thị chế độ xem

window.model.fetch({ 
    success: function (model, response) { 
     window.MyApp.myModelView.render(); 
    } 
}); 

Answer 2

Bạn luôn có thể thiết lập tiêu đề mặc định bằng tùy chọn 'mặc định': http://documentcloud.github.com/backbone/#Model-defaults.

Answer 3

Đặt lại trạng thái của mô hình từ máy chủ. Hữu ích nếu mô hình có không bao giờ được điền dữ liệu hoặc nếu bạn muốn đảm bảo rằng bạn có trạng thái máy chủ mới nhất. Sự kiện "thay đổi" sẽ được kích hoạt nếu trạng thái của máy chủ khác với các thuộc tính hiện tại. Chấp nhận gọi lại thành công và lỗi trong băm tùy chọn, được chuyển qua (mô hình, phản hồi) làm đối số.

Trong trường hợp này, bạn sẽ muốn hiển thị chế độ xem trong gọi lại thành công.

model.fetch({ 
    error: function() { 
    }, 
    success: function (model, response) { // model is ready now 
     // do view stuff here 
    } 
}); 

Answer 4

Rõ ràng từ các câu trả lời trước đó, bạn biết rằng bạn cần hiển thị thêm một chút. Cụ thể, tuyến đường gia đình của bạn được sử dụng để xây dựng myModelView ngay lập tức thay vì khi dữ liệu của nó tải. Điều này xảy ra bởi vì bạn đang gọi render() để nối thêm vào phần thân. Thay vào đó, hãy thử và khởi tạo chế độ xem với phần tử hiện có. Bằng cách này, bạn có thể trì hoãn cuộc gọi để hiển thị cho đến khi tìm nạp hoàn tất:

window.MyApp = Backbone.Router.extend({ 
    routes: { 
     '': 'home' 
    }, 

    initialize: function() { 

    }, 

    home: function() { 
     var $body = $(document.body).empty(); 
     var myModelEl = $("<div></div>").appendTo($body); 

     this.myModelView = new MyModelView({ 
      model: window.mymodel, 
      el: myModelEl 
     }); 
    } 
}); 

Bây giờ, bạn chưa gọi render() nhưng chế độ xem của bạn được đính kèm thành công vào DOM như bạn dự định.

Answer 5

Bạn cũng có thể tận dụng lợi thế của đối tượng thu nhập hoãn lại http://api.jquery.com/category/deferred-object/ rằng Backbone.Model.fetch() trở về, như thế này:

window.MyModel = Backbone.Model.extend({ 
    url: '/mymodel' 
}); 

//when the model is fetched, store a reference to the jQuery deferred object 
window.MyModelFetch = window.MyModel.fetch(); 

window.MyModelView = Backbone.View.extend({ 
    template: _.template($('#mymodel-template').html()), 

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

    render: function() { 
     //reference the deferred object and use 'done' method 
     //to register a callback after complete 
     window.MyModelFetch.done(function(){ 
      var renderedContent = this.template(this.model.toJSON()); 
      $(this.el).html(renderedContent); 
      return this; 
     } 
    } 
}); 

Bạn có thể muốn tạo một phần mở rộng của mô hình xương sống mà các cửa hàng một đối tượng thu nhập hoãn lại trên mô hình của bạn mà bạn có thể tài liệu tham khảo, như thế này:

Backbone.DeferrableModel = Backbone.Model.extend({ 
     fetch: function(){ 
      this.fetching = Backbone.Model.prototype.fetch.apply(this, arguments); 
      return this.fetching; 
     } 
}); 

Sau đó, theo quan điểm của bạn phương pháp render, bạn chỉ có thể nói điều này:

render: function() { 
     //the deferred reference is now directly referenced from your model 
     this.model.fetching.done(function(){ 
      var renderedContent = this.template(this.model.toJSON()); 
      $(this.el).html(renderedContent); 
      return this; 
     } 
    }  

Nó có thể rất tiện dụng để sử dụng một mô hình mở rộng và làm theo mô hình này trong suốt ứng dụng xương sống của bạn.