6

我是 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 中将包含应用程序的内容。

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

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

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

其中哪一个是最好的，所涉及的语法是什么？在此先感谢，任何将 html 组件组装成有说服力的敏捷应用程序的指导将不胜感激。

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

4

2 回答 2

3

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

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

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

于 2012-10-28T03:38:07.623 回答
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);
于 2013-07-26T11:00:46.960 回答