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

【问题标题】：Using agility.js for page layout and composition使用 agility.js 进行页面布局和合成
【发布时间】：2012-09-08 17:28:24
【问题描述】：

我是 MVC 风格的 javascript 库的新手，如果这个问题太简单，请原谅我。我正在尝试完全在jQuery 和agility.js 中编写Single-Page Application。 agility.js documentation 中给出的示例完全包括将 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 中将包含应用程序的内容。

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

我从文档和研究中看到我有 3 个选择：

从原子敏捷对象创建我的页面组合并将它们组装到jQuery 文档就绪块中。 $$.document.append(Foo) 适用于根元素，但我不知道如何将 Foo 的子元素添加到 foo。
使用一个（非常大的）敏捷对象，该对象从上方布置基本的静态 html，并使用 controller 函数（我也无法开始工作）附加控件等。
使用一个根敏捷对象并使用视图将所有子对象附加到它上面（不知何故，我也无法让它工作。）

哪些是最好的，涉及的语法是什么？在此先感谢您，如果有任何将 html 组件组装成有说服力的敏捷应用程序的指导，我们将不胜感激。

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

【问题讨论】：

顺便说一句：您的 jsbin 中的文件引用错误。正确：agilityjs.com/docs/agility.min.js

标签： javascript model-view-controller agility.js

【解决方案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 或 handlebars.js，以方便逻辑、变量插值等。

然后，在您的控制器中，您将从 DOM 加载这些模板的脚本标签的 html 内容，并将它们复制到您的目标 div (#PageHolder) 中。

这种技术的替代方法是将模板存储在头部的文字 JS 对象中：

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

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

【讨论】：

【解决方案2】：

我猜这是课程的马，但我更喜欢将模板代码与敏捷代码一起使用，以便它们一起可见。我不是特别喜欢在视图对象中看到 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);

【讨论】：