Backbone.js: hiển thị bộ sưu tập trong các ứng dụng thực tế

Question

Thật khó chịu, hầu hết các ví dụ ‘hướng dẫn’ của ứng dụng backbone.js đều giả định một phương thức mô hình sạch. I E. rằng các bộ sưu tập mô hình là trống ban đầu, cho đến khi người dùng thêm một mục. Tất nhiên đây không phải là trường hợp trong một ứng dụng thế giới thực, nơi bạn thường có một bộ sưu tập hiện có để bắt đầu với từ cửa hàng cuối cùng.

Tôi muốn biết cách mọi người đối phó với các bộ sưu tập hiện có trong xương sống. Cụ thể:

• Làm cách nào để hiển thị bộ sưu tập sau khi đã được fetch chỉnh sửa? Có phải chỉ là một trường hợp lặp qua bộ sưu tập? Điều này có nên được kích hoạt bởi một số sự kiện không?

• Tài liệu về xương sống nói về ‘bootstrapping’, điều tôi hiểu có nghĩa là sử dụng dữ liệu có sẵn trên tải ban đầu (điều này cũng có ý nghĩa từ quan điểm SEO). Nhưng làm thế nào điều này làm việc trong thực tế? Dữ liệu được đưa vào JS ở phía máy chủ? Hoặc JS kiểm tra DOM?

Tôi cảm thấy đây là câu hỏi khó, nhưng tôi hy vọng sẽ mở rộng dựa trên câu trả lời.

EDIT

Vì vậy, có vẻ như sự đồng thuận là thêm dữ liệu như đảng của JS và quá trình đó trên trang tải.

Một bất lợi lớn mà tôi thấy với kỹ thuật này là thông tin không có sẵn cho trình thu thập dữ liệu của công cụ tìm kiếm. Từ quan điểm đó, có thể tốt hơn là trích xuất nó từ DOM (mặc dù tôi chưa từng thấy ai làm theo cách đó). Hoặc có thể thêm phía máy chủ HTML và dán dữ liệu vào JS?

Answer 1

Tôi gặp tình huống tương tự như bạn, tôi không luôn muốn khởi động dữ liệu của mình ban đầu (đặc biệt nếu dữ liệu của nó từ cuộc gọi api của bên thứ ba). Tôi đã không đi qua bất kỳ hướng dẫn mà làm điều này nhưng nhìn qua các tài liệu thực sự của nó khá dễ dàng. Bạn chỉ cần ràng buộc sự kiện 'reset' (điều này được kích hoạt khi toàn bộ bộ sưu tập được repopulated) vào bộ sưu tập của bạn và render. Đây là ví dụ nhanh:

my_application.js

window.MyApplication = { 
    Models: {}, 
    Collections: {}, 
    Views: {}, 
    Routers: {}, 
    init: function() { 
    // Start the data loading 
    this.someItems = new MyApplication.Collections.Items(); 
    this.someItems.fetch(); 

    // Start rendering the UI before the data is ready 
    new MyApplication.Routers.Items(this.someItems); 
    Backbone.history.start(); 
    } 
}; 

router/items_router.js

MyApplication.Routers.Items = Backbone.Router.extend({ 
    routes: { 
    "" : "index" 
    }, 

    initialize: function(collection) { 
    this.collection = collection; 
    }, 

    index: function() { 
    var view = new MyApplication.Views.ItemsIndex({ collection: this.collection }); 
    $('.items').html(view.render().el); 
    } 
}); 

views/mục/items_index.js

MyApplication.Views.ItemsIndex = Backbone.View.extend({ 
    initialize: function() { 
    _.bindAll(this, "render"); 

    // Once the collection is fetched re-render the view 
    this.collection.bind("reset", this.render); 
    }, 

    render: function() { 
    console.log(this.collection.length); 
    // Render content 
    return this; 
    } 
}); 

Answer 2

Theo như bộ sưu tập hiển thị, vâng tôi thường lặp qua bộ sưu tập và tạo chế độ xem con cho từng mô hình. Đây là một liên kết có thể hữu ích về điều đó http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/

Khi nào bạn nên kết xuất? Vâng, đó là một câu trả lời khó khăn nhưng tôi sẽ không nói nó phản ứng với bất kỳ sự kiện cụ thể nào. Một thứ mà tôi thích là chúng ta có một khung nhìn chính để hiển thị các khung nhìn con, làm cho các khung nhìn phụ khác. Theo quy ước, chúng tôi không hiển thị trực tiếp cho DOM nhưng khi tất cả các chế độ xem phụ được hiển thị, chúng tôi sẽ thêm chế độ xem chính vào DOM và toàn bộ trang hiển thị ngay lập tức. Điều này tránh 'flash của nội dung chưa được lưu trữ'

Về bootstrapping Tôi thấy từ nội dung mà bạn đọc Câu hỏi thường gặp và đó chỉ là những gì tôi đã thực hiện trong thực tế. Tôi sử dụng ASP.Net MVC 3 để phía máy chủ của tôi xem render sẽ có một cái gì đó tương tự (mặc dù tôi sẽ không đặt 'cuốn sách' trên không gian tên toàn cầu bình thường):

<script type="text/javascript"> 
    books = new BooksCollection(); 
    books.reset(@Html.ToJson(Model)); 
</script> 

Hy vọng rằng sẽ rất hữu ích.

Answer 3

Thực ra, tôi đã làm một số công việc về Backbone cho một thời gian ngắn và tôi thấy rằng dữ liệu Bootstrapping thực sự hữu ích trong một số trường hợp, khi bạn biết rằng bạn sẽ yêu cầu dữ liệu đó SO SOON khi tải trang (t Hus giảm thêm một AJAX gọi)

Trong Symfony, tôi làm điều đó bằng cách làm cho các dữ liệu cần thiết theo cách này:

<script type="text/template" id="__user-boostrap"> 
    {% echo your data from php or render a controller in symfony or whatever server side script/framework you want %} 
    // for example in symfony2, I do: 
    {% render "myBundle:Core:getUser" %} 
</script> 

Bây giờ, trong initialize() chức năng, bạn có thể nhấc dữ liệu này trực tiếp từ DOM , và bắt đầu làm những công việc như bình thường:

Ví dụ, trong Router của tôi, tôi làm

myApp.Router = Backbone.Router.extend({ 
    var data = JSON.parse($('__user-bootstrap').html()); 
    var __games = new myApp.Games(); 
    __games.reset(__games.parse(data.games)); 
    var gameList = new myApp.GameListView({ collection: __games }); 
    $(this.gameView).html(gameList.$el); 
}); 

Hope this helps ...