使用agility.js进行页面布局和合成

Using agility.js for page layout and composition

本文关键字：布局 agility js 使用      更新时间：2023-09-26

我是MVC风格javascript库的新手，如果这个问题太基础，请原谅。我正在尝试完全用jQuery和agility.js编写一个单页应用程序。agility.js文档中给出的示例完全包括向文档根添加html元素。问题：是否有一种"最佳实践"方法来按组件组装页面。

以下是我的html应用程序的大致轮廓：

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

"AppPane"中的div将是应用程序的内容。

好吧，考虑到这一切，我不是在问我能做什么，而是在问我应该做什么。

我从文件和我的研究中看到，我有三个选择：

  1. 从原子敏捷性对象创建我的页面组合，并将它们组装到jQuery文档就绪块中。$$.document.append(Foo)适用于根元素，但我不知道如何将Foo的子元素添加到Foo中
  2. 使用一个（非常大的）敏捷性对象，它从上面布局了基本的静态html，并使用controller函数将控件等附加到该对象上（我也无法使用它）
  3. 使用一个根敏捷性对象，并使用view将所有子对象附加到它上（不知怎么的，我也没能做到这一点。）

其中哪一个是最好的，所涉及的语法是什么？提前感谢，如果能为您提供将html组件组装成令人信服的敏捷应用程序的指导，我们将不胜感激。

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

在我看来，组织页面模块的最佳方式是将各个客户端模板保存在头部的脚本标记中：

<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>
...

您甚至可以选择使用模板语言，如jQuery.template或handlers.js，以促进逻辑、变量插值等。

然后，在您的控制器中，您将从DOM加载这些模板的脚本标记的html内容，并根据需要将它们复制到目标div（#PageHolder）中。

这种技术的另一种选择是将模板存储在头部的文本JS对象中：

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

这仅仅是一个开始。还有很多选项，例如预编译模板、细分模板以避免重复的模板编译等。从结构角度来看，将模板维护在专用位置将有助于扩展单页应用程序。

我想这是马的课程，但我更喜欢将模板代码与敏捷代码放在一起，这样它就可以一起显示了。我不太喜欢在视图对象中看到html和样式，但您可以在其他变量中设置这些，并在视图中引用它们，如下所示：

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);
相关文章：