Eva*_*lee 6 javascript model-view-controller agility.js
我是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个选择:
jQuery文档就绪块中. $$.document.append(Foo)适用于根元素,但我无法弄清楚如何将Foo的子元素添加到foo.controller的功能(我没有带能够得到任何工作)哪个是最好的,涉及的语法是什么？在此先感谢,任何有关将html组件组装成一个有说服力的敏捷性应用程序的指导将非常感激.
在我看来，组织页面模块的最佳方法是将各个客户端模板保存在头部的脚本标记中：
<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>
这仅仅是个开始。还有更多选项，例如预编译模板、细分模板以避免冗余模板编译等。从结构的角度来看，将模板维护在专用位置将帮助您扩展单页应用程序。
| 归档时间： |
|
| 查看次数： |
787 次 |
| 最近记录： |