如何异步获取 widget 目录下的组件？

[ystarlongzi]

假设有以下的目录：

-- page
    -- index
        -- index.vm
    -- login
        -- index.vm
-- widget
    -- login
        -- index.css
        -- index.js
        -- index.vm

其中 widget/login是一个具有完整登录业务的组件。那么如果我们只需在登录页面page/login/index.vm引入这个组件就可以，代码如下：

.....
#widget('widget/login/index.vm')
.....

那么，假如说在首页page/index/index.vm里，有一个按钮会弹出一个登录弹框，那么怎么将这个登录组件引入呢？page/index/index.vm代码如下

.....
## 按钮这里如何 ajax 异步引入 `widget/login` 内容？?
<button>登录弹框</button>
#script()
document.querySelector('button').onclick = function () {
       // 弹框登录业务，如何引入？？
 }
#end
.....

目前想到的方案有： 1）在page/index/index.vm也引入登录 widget 文件，默认隐藏，在点击按钮时，将其显示出来 2）ajax 请求这个登录 widget 文件，让后台输出 html，然后在 append 页面里

jello 里有相关的解决方案嘛？

[2betop]

你可以尝试下，这种方式： http://oak.baidu.com/jello-demo/examples/partial

源码：https://github.com/2betop/jello-demo/blob/master/page/examples/partial.vm

[ystarlongzi]

@2betop 恩恩。。谢谢了。

[ystarlongzi]

@2betop 早上尝试了下，是可行的，不过还有些疑问和问题

疑问： 1）关于模板，jello 建议使用velocity，还是jsp？ 2）在 page/layout/ajax.vm 文件中使用的fis 标记 <!--FIS_STYLE_PLACEHOLDER-->、<!--FIS_SCRIPT_PLACEHOLDER--> 是用来标记静态资源输出的位置，这两个标记直接书写在.vm文件里是不生效的嘛？

问题：ajax 获取 widget 时，#script()标记下资源路径的问题 文件目录还是参照最上面的。假设widget/login/index.vm文件内容如下：

......

## 注：
## 假设这里已经正确引入了<!--FIS_STYLE_PLACEHOLDER-->、<!--FIS_SCRIPT_PLACEHOLDER-->标记
## 也就是通过 ajax 已经成功获取到内容，并且静态资源已经输出了，只是某些情况下路径存在些问题

## 注：
## 路径引用正确：/static/widget/login/index.css
#require('index.css')

## 注：
## 路径引用正确：/static/widget/login/index.js
#require('index.js')

## 注：
## 脚本里通过 require 请求文件，路径引用错误，为 /widget/login/index.js
#script()
require(['index.js'], function () {
    // 与 #require() 标记获取的路径地址不一致
});
#end

......

[oxUnd]

@ystarlongzi

• 推荐 velocity 原因无他，大厂用得多
• ajax.vm 不是就一个 .vm 文件吗？

• 至于 js 中的 require 是 widget/login/index.js 最终被保留了，这个你不需要介怀；因为 require 第一个参数并不是一个资源的 url ，而是标记这个资源的一个 ID，一般来说是源码的 subpath

  /widget/a.js => ID = widget/a.js
  /widget/b/b.js => ID = widget/b/b.js

  ID 就是一个资源的标识，就好比给资源标记了一个号一样；假设执行 require('a') 只要 a 有对应的定义就行；

  define('a', function (require, exports, module) {
  //...
  });