# icedog.durandal

**Repository Path**: dhclly/icedog.durandal

## Basic Information

- **Project Name**: icedog.durandal
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-09-27
- **Last Updated**: 2021-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# durandal

Home | Durandal
http://durandaljs.com/

BlueSpire/Durandal: Durandal has evolved to the next generation: Aurelia.
https://github.com/BlueSpire/Durandal


新一代框架 Aurelia  https://aurelia.io/

## 目录

1. hello world 入门项目（视图和逻辑在一块模式）
2. hello world 入门项目（MVC 目录结构模式）
3. hello world 入门项目（bootstrap样式美化）


## composition engine 默认查找模块规则

> 参见 `hello-world\app\views\white-paper.html`

传入一个字符串，且带有`.html`扩展名，则会以`app/views`为基础目录，进行查找视图，并绑定为当前模块的上下文

```html
<div data-bind="compose:'warn-tips.html'"></div>
<div data-bind="compose:'show-module-id.html'"></div>
<div data-bind="compose:'show-module-json.html'"></div>
```

传入一个字符串，而且是模块id(模块路径名)，则根据模块id进行加载模块和视图，模块id在`viewmodels`里面的，会到`views`里面查找视图，其他模块则是在模型的同一路径下找视图

```html
<div data-bind="compose:'viewmodels/show-module-id'"></div>
<div data-bind="compose:'viewmodels/show-module-json'"></div>
<div data-bind="compose:'components/datetime/index'"></div>
```

传入一个对象，定位它的视图，并绑定视图，在模型的同一路径下找视图

```html
<div data-bind="compose:datetime"></div>
```

传入一个函数，根据函数返回值进行查找模型和绑定视图

```html
<div data-bind="compose:getYourCompose($data.datetime)"></div>
<div data-bind="compose:getYourCompose('components/datetime/index')"></div>
<div data-bind="compose:getYourCompose('viewmodels/show-module-id')"></div>
<div data-bind="compose:getYourCompose('show-module-json.html')"></div>
```

```javascript
define([], function() {
  let htmlBox = new HtmlBox(nat);
  return {
    getYourCompose: function(data) {
      //some logic...
      return data;
    }
  };
});
```



Docs - Using Composition | Durandal
http://durandaljs.com/documentation/Using-Composition.html

Now, the compose binding queries the observable for its value. Here's a few things that could happen, depending on the value of the observable:

- If it's a string value:
  - If it has a view extension:
    - Locate the view and inject it into the dom, binding against the current context.
  - If it is a module id:
    - Locate the module, locate its view, bind them and inject them into the DOM.
- If it's an object:
  - Locate its view, bind it and inject them into the DOM.
- If it's a function:
  - Call the function with the *new* modifier, get its return value, find the view for the return value, bind them and inject them into the DOM.

## 显示指定compose的model 和view

上面是简写方式，下面是详写方式，所以用法都相同

指定view位置，model使用当前上下文，视图依据的根目录是views文件夹

```html
<div data-bind="compose:{view:'alert/danger.html'}"></div>
<div data-bind="compose:{view:'alert/info.html'}"></div>
<div data-bind="compose:{view:'alert/success'}"></div>
<div data-bind="compose:{view:'alert/warning'}"></div>
```

指定model值，和上面默认的模块查找规则一致，即根据模块id进行加载模块和视图，模块id在`viewmodels`里面的，会到`views`里面查找视图，其他模块则是在模型的同一路径下找。视图根目录是main.js里面指定的baseURL

```html
<div data-bind="compose:{model:'components/datetime/index'}"></div>
<div data-bind="compose:{model:'viewmodels/show-module-id'}"></div>
<div data-bind="compose:{model:'viewmodels/show-module-json'}"></div>
```

指定model和view值，则根据指定的值来找，注意，此时views的根目录是main.js里面指定的baseURL和model一样。

```html
<div
    data-bind="compose:{model:'components/dangerous/fire',view:'views/alert/danger.html'}"
  ></div>
<div
    data-bind="compose:{model:'components/dangerous/water',view:'views/alert/danger.html'}"
  ></div>
<div
    data-bind="compose:{model:'components/dangerous/fog',view:'views/alert/danger.html'}"
  ></div>
```

## 内嵌模板化

### inline模式

即调用处指定好模型，然后视图用compose之间的dom元素作为视图

```html
<div data-bind="compose:{model:'components/dangerous/fire',mode:'inline'}">
    <h3 data-bind="text:tip"></h3>
</div>
```

### templated模式

通过`data-part` 标记来确定模板中要被替换的部分

编写的模板

```html
<div>
  <h1>通知</h1>
  <div class="well">
    <h3 data-part="tip">default content</h3>
  </div>
</div>

```

调用方式

```html
<div data-bind="compose:{view:'alert/notice.html', mode:'templated'}">
    <!-- 此处的part是用于填充notice视图中的tip部分 -->
    <div data-part="tip" data-bind="compose:{view:'alert/danger.html'}"></div>
  </div>
  <div>B:</div>
  <div
    data-bind="compose:{view:'views/alert/notice.html',model:fire, mode:'templated'}"
  >
    <!-- 此处的part是用于填充notice视图中的tip部分 -->
    <div data-part="tip" data-bind="compose:{view:'alert/danger.html'}"></div>
  </div>
```

需要注意的是，是否指定了model，view的字符串的根目录会发生变化，因为有了model就可以根据modelId找view，而没有如果这样找，本身视图已存在，无法进行额外的组合，所以只能以默认的views文件夹开始找

## compose 额外设置之cacheViews

Docs - Using Composition | Durandal
http://durandaljs.com/documentation/Using-Composition.html

true后，如果进行了缓存视图，dom存在后则之后只会触发activate生命周期

```html
<div data-bind="compose:{model:view,cacheViews:true}"></div>
```

在binding生命周期里面也可以设置

```javascript
binding = function() {
    return { cacheViews: true }; //cancels view caching for this module, allowing the triggering of the detached callback
  };
```



## compose 额外设置之activate

false后不会触发activate生命周期

```html
<div data-bind="compose:{model:view,activate:false}"></div>
```

如果如下设置

```html
<div data-bind="compose:{model:view,cacheViews:true,activate:false}"></div>
```

则存在dom的时候，生命周期都不会触发

## compose 的生命周期回调

Docs - Hooking Lifecycle Callbacks | Durandal
http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks.html

当合成引擎（或您）调用viewLocator.locateViewForObject（）时，它将经历一个尝试为该对象找到正确视图的过程。通常，这是通过约定完成的。但是，您的对象可以实现一个钩子来手动返回视图。为此，向您的对象添加一个名为getView（）的函数。此函数可以返回基础结构用来查看视图的视图ID，也可以返回DOMElement，从而允许您的对象手动构造其视图以进行绝对控制。另外，您可以添加viewUrl属性。

接下来，合成引擎将查找激活回调。如果在compose绑定中指定了任何activationData，则将其作为参数传递。如果activate回调返回一个promise，则合成引擎将在继续处理之前等待其解析。

一旦获得视图并完成激活，合成引擎将尝试将视图与其关联对象绑定。为此，它使用活页夹，该活页夹在对象上查找两个可能的钩子。在数据绑定发生之前，它将调用binding（view）。数据绑定完成后，它将调用bindingComplete（view）。对于绑定回调，您可以返回false或形式为{applyBindings：false}的对象来取消Knockout applyBindings调用。

数据绑定完成后，组合模块将执行其工作，以将绑定视图组合到DOM中。它可能会也可能不会使用过渡作为此过程的一部分。无论哪种方式，一旦视图附加到其父级的DOM节点，它将检查您的对象是否有附加的（视图，父级）回调。

最后，当整个合成过程（包括任何父级和子级合成）完成时，合成引擎将调用compositionComplete（view，parent）回调，从子级到父级冒泡。

如果您的视图已从DOM中删除，则会调用detached（视图，父级）回调。

## durandal的坑

通过路由如 `http://localhost:8706/hello-world/#bug-test` 访问模块 `bug-test`，且模块内部有个列表循环的时候，第一次访问，模块正常。

当切换到其他模块然后切换到当前模块时候，随意变更输入框，会导致触发出错，而在其他模块里面通过 `<div data-bind="compose:'viewmodels/bug-test'"></div>` 方式绑定后切换则不会出错

shell.js

```javascript
//...
{
      route: "bug-test",
      moduleId: "viewmodels/bug-test",
      title: "bug 测试",
      nav: true
},
//...
```

bug-test.js

```javascript
define(["durandal/system", "knockout", "jquery"], function(system, ko, $) {
  var exports = {
    count: ko.observable(10),
    nums: ko.observableArray([]),
    handleChangeNumberCount: function() {
      var count = this.count();//方法二  var count = this.count.peek();
      var newNums = [];
      for (var index = 0; index < count; index++) {
        newNums.push(index);
      }
      this.nums(newNums);
    },
    attached: function(view, parent) {
      this.count(10);
      this.handleChangeNumberCount();
    },
    compositionComplete: function(view) {
      // this.handleChangeNumberCount(); //方法一
    }
  };
  return exports;
});
```

bug-test.html

```html
<div>
  <div>
    <!-- 后面访问，更改此处的值，会触发bug-test 整个模块刷新  -->
    <input type="number" data-bind="value:count" />
    <input
      type="button"
      data-bind="click:handleChangeNumberCount"
      value="更改数量"
    />
  </div>
  <div>count: <span data-bind="text:count"></span></div>
  <div data-bind="foreach:{data:nums,as:'n'}">
    <div data-bind="text:n"></div>
  </div>
</div>

```

当然也有解决办法，办法一，把 `this.handleChangeNumberCount();` 方法执行放到生命周期`compositionComplete` 中执行



方法二

读取count的方法改成以peek方法读取，核心错误就在这里，原因不可知。

```javascript
var count = this.count();//方法二  var count = this.count.peek();
```