Question

我是MVC风格的javascript库的新手，所以请原谅我这个问题是否太基础了。我试图在Single-Page Application和jQuery中完全写agility.js。 agility.js documentation中给出的示例完全由向文档根添加html元素组成。问题：是否有最佳实践＆＃39;按组件组装页面的方法。

以下是我的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＆＃39; div将是应用程序的内容。

好的，考虑到所有这些，我不会问我能做什么，但我不知道该怎么做。

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

从原子敏捷性对象创建我的页面组合，并将它们组装在jQuery文档就绪块中。 $$.document.append(Foo)适用于根元素，但我无法弄清楚如何将Foo的孩子添加到foo。
使用一个（非常大的）敏捷性对象，它从上面展示基本的静态html，并使用controller函数（我已经能够开始工作）附加控件等等。）
使用一个根敏捷性对象，并使用视图将所有子项附加到其上（不知何故，我已经能够使其工作了。）

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

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

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

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

Answer 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);

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

2 个答案: