Javascript 使用agility.js进行页面布局和合成_Javascript_Model View Controller_Agility.js

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

javascript model-view-controller

Javascript 使用agility.js进行页面布局和合成,javascript,model-view-controller,agility.js,Javascript,Model View Controller,Agility.js,我不熟悉MVC风格的javascript库，所以如果这个问题太基本，请原谅。我正试着写一篇完整的文章。js中给出的示例完全包括向文档根添加html元素。问题：是否有一种“最佳实践”方法来按组件组装页面以下是我的html应用程序的大致轮廓： <html> <head> ... </head> <body> <header> ... </header> <div id=Pa

我不熟悉MVC风格的javascript库，所以如果这个问题太基本，请原谅。我正试着写一篇完整的文章。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个选择：

从atomic agility对象创建我的页面组合，并将它们组装到

jQuery

document ready块中

$$.document.append（Foo）

适用于根元素，但我不知道如何将Foo的子元素添加到Foo中

使用一个（非常大的）agility对象，它从上面展示基本的静态html，并使用

controller

函数（我也无法使用这些函数）将控件等附加到该对象上

使用一个根agility对象，并使用view将所有子对象附加到该对象上（不知何故，我也无法使其工作）

以下哪项是最好的，涉及的语法是什么？提前感谢您，对于将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>
...

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


一些HTML模板
一些HTML模板
...

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

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

此技术的另一种替代方法是将模板存储在头部的文本JS对象中：

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

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


变量模板={
模板1：“一些HTML模板”
...
}

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

我想这是为课程准备的，但我的偏好是将模板代码与敏捷代码放在一起，这样所有代码都可以一起看到。我并不特别喜欢在视图对象中看到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);

var frmMainTemplate=''+
'' +
“您键入的内容”
''; 
var frmmanstyle='&span{background color:#888；color:#fff；}'；
变量frmMain=$$({
模型：{name:'}，
视图：{
格式：frmMainTemplate，
款式：frmMainStyle
},
控制器：{}
});
$$.document.append（frmMain）；

BTW:jsbin中的文件引用错误。对的：