使用 Ajax 获取数据¶

前面的例子是直接把数据写在HTML页面中，那么在实例的运行环境中，一种是通过后台模 板的方式，将数据直接生成，所以也可以形成这个效果。这种做法更多是考虑后台生成前 端展示页面的形式，前后台分离不明显。前后台分离的做法，更多是通过ajax方式来获得 数据。那么下面我们来尝试一下。

定义数据文件¶

因为这只是一个 Demo ，所以我们并不直接实现后台服务，所以我们把数据通过定义为 json 数据，然后通过 ajax 来读取它，来模拟实际的处理。

{"subject": "Blog Title","author": "张三","publish_date": "2014/3/15","comment_count": 0,"content": "<h2>这是一个测试的博客</h2><p>这是内容 1</p><p>这是内容 2</p><p>这是内容 3</p><p>这是内容 4</p>"}

JSON.parse(json_string)

Ajax 库的选择¶

伴随着 avalon，作者司徒正美还开发了其它的 js 库，如： mmRequest, mmDeffered 等， 其中 mmRequest 就是可以实现 jquery 的 ajax 功能。不过这些库本身没有放在 avalon 的源码中，所以要使用它们还要单独下载源码。这里我先 使用 jquery 。而且在前面的例子中，因为使用semantic-ui，它本身就需要安装 jquery， 所以我们已经不再需要加入新的 js 文件了。

获取数据¶

我们这个页面实际上只在展示时获取一次数据，因此，可以直接在 Model 定义之外直接 从后台读取数据，然后修改 Model 实例中对应的属性。代码为：

...
<script>
var model = avalon.define("blog", function(vm){
    vm.blog = {};
});

$(function(){
    $.getJSON('blog_info.json').done(function(data){
        model.blog = data;
    });
});
</script>
...

从上面的代码可以看出， vm.blog = {} ，内容没有直接定义出来。

通过 jquery 的 $.getJSON() 来获得数据，并且在 done() (即success回调)中将数据 绑定到 model.blog 上。这里有一点很重要，我们不能在 Model 外面直接操作 vm ，所 以要通过 model 对象。从 Avalon 的角度， vm 是用来定义的，而 model 是真正可 以操作的对象。不过如果在 Model 定义的内部，直接使用 vm 一般也没有什么大问题。 不过，心里要清楚它们其实是不同的东西。

观看演示代码¶

• 演示代码1 demos/ajax_basic.html

参考文档¶

• AJAX
• Avalon 最佳实践 其中有一些关于 Model 应如何定义，以及定义用的 vm 与返回后的对象的区别