# 视图选项
## 概述
视图选项，是 View\.js 支持的第二种数据传导方式。\
与视图参数不同的是，视图选项的传导媒介，是地址栏。其地址栏表现形态如下所示：
> *[http://domain:port/context/path/to/html#view-id@view-namespace!\*\*option1=value1\\\&option2=value2](https://doc.view-js.com/http:/domain:port/context/path/to/html#view-id@view-namespace!**option1=value1\\\&option2=value2)...\*\**
其中，`option1` 和 `option2` 即为视图选项。
开发者同样只能在 视图跳转 时指定视图选项。但支持指定视图选项的视图跳转 API 只包括：
1. `View.navTo()`
2. `View.changeTo()`
## 参数赋值
视图选项的赋值，同时支持使用 js 传导来进行 和 使用 html 传导来进行。
对于 js 传导，使用预留关键字：`options` 在跳转指令中指定，例如：
{% tabs %}
{% tab title="action.js" %}
```javascript
/**
* 以“替换栈顶”的方式跳转至 mall 命名空间下, ID为 goods-detail 的视图。
*
* 第一个和第二个参数指定了跳转目标；
* 第三个参数指定了跳转控制选项，其中，关键字：'options' 用于指定视图选项集合。
*/
View.changeTo("goods-detail", "mall", {
/**
* 视图选项只支持字符串类型
*/
options: {
paramName1: "boo"
paramName2: "bar"
}
});
```
{% endtab %}
{% endtabs %}
对于 html 传导，在 `data-view-rel` 指令中，使用 `!` 符号追加至跳转目标后即可，例如：
{% tabs %}
{% tab title="main.html" %}
```markup
商品详情
商品详情
```
{% endtab %}
{% endtabs %}
## 参数获取
由于视图选项的传导媒介是地址栏，而地址栏只能表达出当前活动视图的信息，所以开发者只能获取到当前活动视图所关联的视图选项。
用于获取当前活动视图的视图选项的API为：
1. `View.hasActiveViewOption(name: string): boolean`\
判断视图选项中是否含有特定名称的参数
2. `View.getActiveViewOption(name: string): null|string`\
获取视图选项中特定名称的参数
3. `View.getActiveViewOptions(): null|Object`\
获取视图选项描述的参数集合
例如：
{% tabs %}
{% tab title="init.js" %}
```javascript
var view = View.ofId("goods-detial", "mall");
view.on("enter", function(){
var param1 = View.getActiveViewOption("paramName1"); // -> "boo"
var param2 = View.getActiveViewOption("paramName2"); // -> "bar"
var id = View.getActiveViewOption("id"); // -> "ID666"
var options = View.getActiveViewOptions();
console.log(options["paramName1"] === param1); // -> true
console.log(options["paramName2"] === param1); // -> true
console.log(options["id"] === param1); // -> true
});
```
{% endtab %}
{% endtabs %}
{% hint style="warning" %}
参数名区分大小写
{% endhint %}
## 参数更新
部分情况下，开发者需要响应用户的操作，更新地址栏中的视图选项。对此，View\.js 提供了API：`View.setActiveViewOption(name: string, value: string)` 来应对。例如：
{% tabs %}
{% tab title="main.js" %}
```javascript
var count = view.getActiveViewOption("count") || 1;
/**
* 增加购买数量
*/
Hammer(plusObj).on("tap", function(){
View.setActiveViewOption("count", String(++count));
});
```
{% endtab %}
{% endtabs %}
## 与 视图参数 的对比
由于视图选项是通过地址栏传导的，并且只能检索当前活动视图关联的视图选项，所以视图选项在如下几个方面与视图参数有所不同：
1. 参数个数受浏览器地址栏长度限制
2. 参数类型只能是 `string` 类型
3. 参数在页面刷新后仍然可以检索到
4. 参数在浏览器前进或后退时自动恢复
## 更智能的参数检索方法
为简化开发者的参数检索工作，View\.js 提供了一个更智能的参数检索API：`View.seekParameter(name: string)`。
该方法如下方式工作：
1. 尝试从 视图参数 中检索同名参数，有则返回，没有则执行步骤2；
2. 尝试从 视图选项 中检索同名参数，有则返回，没有则执行步骤3；
3. 尝试从 queryString 中 检索同名参数，有则返回对应的取值，没有则返回 `null`。
例如：
{% tabs %}
{% tab title="action.js" %}
```javascript
/**
* 从 商品详情 页面跳转至 确认订单 界面
*
* 跳转前，页面的URL为：http://domain/main.html?id=G01#goods-detail
*/
View.navTo("confirm-order", {
params: {
inventory: 100 /* 库存量：100 */
},
options: {
count: 1 /* 购买个数：1 */
}
});
```
{% endtab %}
{% tab title="init.js" %}
```javascript
var view = View.ofId("confirm-order");
/**
* 跳转后，页面的URL为 http://domain/main.html?id=G01#confirm-order!count=1
*/
view.on("enter", function(){
console.log(view.seekParameter("id")); // -> "G01"
console.log(view.seekParameter("inventory")); // -> 100
console.log(view.seekParameter("count")); // -> "1"
});
```
{% endtab %}
{% endtabs %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://doc.view-js.com/main.-shi-tu-xuan-xiang.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.