Intact.Vdt配置

Intact.Vdt配置

Intact.Vdt的配置，都是针对模板的，使用Intact.Vdt.configure()方法进行配置。

delimiters

配置Vdt模板动态语法分隔符，默认是一对大括号分割{}

@type {Array}
@default ['{', '}']

@example

// 使用两对大括号分割
Intact.Vdt.configure('delimiters', ['{{', '}}']);

autoReturn

Vdt模板默认会返回最后一个标签元素，所以我们在模板的最后必须定义一个标签返回。如果你像手动返回，可以将该配置设为false

@type {Boolean}
@default true

@example

Intact.Vdt.configure('autoReturn', false);

onlySource

编译模板时，是否只返回模板函数字符串，不去定义正真的函数，默认会定义函数

@type {Boolean}
@default false

@example

Intact.Vdt.configure('onlySource', true);

编译模板时，如果定义函数，会使用new Function()方法来定义

noWith

编译模板时，是否使用with(scope)语法将模板包起来，这样可以在取值时可以省去scope前缀。默认采用with语法，可以将该配置设为true来去掉它。

@type {Boolean}
@default false
@example
```
Intact.Vdt.configure('noWith', true);
```

skipWhitespace

是否忽略掉模板定义中，标签之间的空白字符。该配置只会去掉标签间的空白，对于文字之间、文字与标签之间的空白会保留。

@type {Boolean}
@default true 默认去掉

@example

Intact.Vdt.configure('skipWhitespace', false);

setModel

当使用v-model指令时，当数据变更时，会调用该配置设置的函数去改变数据

@type {Function}

@default

function(data, key, value) {
  data.set(key, value);
}

@example

// 例如，我们可以使用v-model指令去改变实例的属性
// 仅仅为了演示，实际应用中，不应该去改变该配置
Intact.Vdt.configure('setModel', function(data, key, value) {
  data[key] = value;
});

getModel

与setModel对应，使用v-model时，规定获取数据的方法

@type {Function}

@default

function(data, key) {
  return data.get(key);
}

@example

// 例如，我们可以使用v-model指令获取实例的属性
// 仅仅为了演示，实际应用中，不应该去改变该配置
Intact.Vdt.configure('getModel', function(data, key) {
  return data[key];
});

disableSplitText

当在服务器渲染组件时，存在以下问题：

对于模板

<div>{a}{b}</div>

假设a = 1, b = 2，则渲染的结果为：

<div>12</div>

上述渲染结果返回给浏览器后，浏览器会将12作为一个TextNode，而这在前端混合时(hydrate)，造成问题，因为它们应该当做两个TextNode处理才对（1和2）。

所以后端渲染，我们可以是结果加入一些分隔符来区分它们

<div>1<!---->2</div>

上述渲染结果，我们在1和2中间加入注释节点来分割它们，然后前端混合时，当检测到该注释时，自动忽略，就可以正常混合了。

该配置默认为开启，表示使用注释分割

@type {Boolean}
@default false

@example

Intact.Vdt.configure('disableSplitText', true);

Intact.Vdt的配置，除了setModel和getModel是运行时配置外，其他都是编译时配置，所以当你想在浏览器实时编译模板时，它们才有用。如果你使用vdt-loader来处理编译，那应该将它们当做vdt-loader的参数，而不是直接调用Intact.Vdt.configure()来配置。