Sử dụng agility.js để bố cục trang và bố cục

Tôi mới sử dụng thư viện javascript kiểu MVC, vì vậy hãy tha thứ cho tôi nếu câu hỏi này quá cơ bản. Tôi đang cố gắng viết hoàn toàn Single-Page Application trong jQuery và agility.js. Các ví dụ được đưa ra trong agility.js documentation bao gồm hoàn toàn việc thêm các phần tử html vào thư mục gốc của tài liệu. Câu hỏi: Có cách 'Thực hành tốt nhất' để tập hợp trang theo thành phần hay không.Sử dụng agility.js để bố cục trang và bố cục

Dưới đây là một phác thảo sơ bộ ứng dụng html của tôi:

<html> 
    <head> ... </head> 
    <body> 
     <header> ... </header> 
     <div id=PageHolder> 
      <div id=AppPane_1></div> 
      <div id=AppPand_2></div> 
     </div> 
     <footer> ... </footer> 
    </body> 
</html>

Trong divs của AppPane 'sẽ là nội dung của ứng dụng.

Được rồi, cho tất cả điều này, tôi không hỏi tôi có thể làm gì, nhưng tôi hỏi tôi nên làm gì.

tôi nhìn thấy từ các tài liệu và nghiên cứu của tôi rằng tôi có 3 lựa chọn:

tạo thành phần trang web của tôi từ các đối tượng nhanh nhẹn nguyên tử và lắp ráp chúng trong một khối sẵn sàng jQuery tài liệu. $$.document.append(Foo) hoạt động cho phần tử gốc, nhưng tôi không thể tìm ra cách thêm con của Foo vào foo.
Sử dụng một (rất lớn) đối tượng nhanh nhẹn đưa ra html tĩnh cơ bản từ trên và thêm các điều khiển và không sử dụng chức năng controller (mà tôi không thể làm việc)
Sử dụng một đối tượng nhanh nhẹn gốc và chắp thêm tất cả trẻ em vào nó bằng cách sử dụng chế độ xem (bằng cách nào đó, tôi cũng không thể làm việc đó.)

Điều nào là tốt nhất và cú pháp liên quan là gì? Cảm ơn trước, bất kỳ hướng dẫn nào trong việc lắp ráp các thành phần html vào một ứng dụng nhanh nhẹn có thể sẽ được đánh giá cao.

http://jsbin.com/ojenon/1/

Nguồn

2012-09-15 Evan Plumlee

BTW: Tham chiếu tệp trong jsbin của bạn sai . Chính xác: http://agilityjs.com/docs/agility.min.js – yckart

Theo tôi, cách tốt nhất để tổ chức các module trang của bạn là để tiết kiệm các mẫu client-side cá nhân trong thẻ script trong đầu:

<html> 
<head> 
<script type="text/template" id="template1"> 
    <b>Some <abbr>HTML</abbr> template</b> 
</script> 
<script type="text/template" id="template2"> 
    <b>Some <abbr>HTML</abbr> template</b> 
</script> 
</head> 
...

Bạn thậm chí có thể chọn để sử dụng ngôn ngữ mẫu, chẳng hạn như jQuery.template hoặc handlebars.js, để tạo điều kiện logic, nội suy biến, v.v.

Sau đó, trong tầm kiểm soát của bạn ler, bạn sẽ tải nội dung html của các thẻ tập lệnh mẫu này từ DOM và sao chép chúng vào div đích của bạn (#PageHolder) nếu thích hợp.

Một thay thế cho kỹ thuật này sẽ được lưu trữ các mẫu của bạn trong một đối tượng JS chữ trong đầu:

<script type="text/javascript"> 
var Templates = { 
    template1: "<b>Some <abbr>HTML</abbr> template</b>" 
    ... 
} 
</script>

Đây mới chỉ là khởi đầu. Có nhiều tùy chọn hơn, chẳng hạn như biên dịch trước mẫu của bạn, chia nhỏ mẫu của bạn để tránh biên dịch mẫu thừa, v.v. Từ quan điểm về cấu trúc, việc duy trì mẫu của bạn ở vị trí cống hiến sẽ giúp bạn mở rộng ứng dụng trang đơn của mình.

Nguồn

2012-10-28 03:38:07 mickeyreiss

Đó là ngựa cho các khóa học mà tôi đoán, nhưng sở thích của tôi là có mã mẫu cùng với mã Agility để tất cả đều được hiển thị cùng nhau.Tôi không đặc biệt thích xem html và kiểu dáng bên trong đối tượng chế độ xem, nhưng bạn có thể thiết lập chúng trong các biến khác và tham chiếu chúng trong chế độ xem như sau:

var frmMainTemplate = '<div>' + 
         '<input type="text" data-bind="name" />' + 
         '<p>You typed <span data-bind="name" /></p>' + 
         '</div>'; 
var frmMainStyle = '& span {background-color:#888; color:#fff;}'; 

var frmMain = $$({ 
    model: {name:''}, 
    view: { 
    format: frmMainTemplate, 
    style: frmMainStyle 
    }, 
    controller: {} 
}); 

$$.document.append(frmMain);

Nguồn

2013-07-26 11:00:46 KevBrew

Sử dụng agility.js để bố cục trang và bố cục

Trả lời

Các vấn đề liên quan