Question

我有一个与DOM密切相关的应用程序。我需要跟踪代表它们背后对象的元素的大小和位置。

myViewModel.js

export class MyViewModel {

    // my root view model has important properties 
    // that all other functions and objects need to use
    constructor() {
        this.importantProperty = 'veryimportant';
        this.things = [];
    }

    // i create things in the view model that are
    // represented in the dom
    createThing() {
        this.things.push({
            isAThing: true
        });
    }

    // i do things with things in the view model 
    // that depend strongly on the root view model
    doSomethingWithThing(thing, property) {
        thing[property] = `${this.importantProperty}${property}`;
    }

    // but i need to know all about the dom representation
    // of the things in the view model
    doAnotherThingWithThing(thing) {
        console.log(`the height of the thing is ${thing.height}`);
    }

    lookAndSeeWhatSizeThisThingIs(element, thing) {
        thing.height = element.clientHeight;
        thing.width = element.clientWidth;
        console.assert('That was easy!');
    }
}

myViewModel.html

<template>

    <!-- these things can change in size and shape, and I have
        no idea what they will be until runtime
    <div repeat.for="thing of things"

        <!-- so ideally I'd like to call something like this -->
        composed.delegate="lookAndSeeWhatSizeThisThingIs($element, thing)">

        <img src="img/${$index}.png" />
    </div>

</div>

今天有办法做到这一点吗？

Answer 1

由于CustomAttribute可以访问合成生命周期，因此我们可以创建一个CustomAttribute来触发attached()回调中触发的元素上的事件。

import {autoinject} from 'aurelia-framework';

@inject(Element)
export class AttachableCustomAttribute {

    constructor(element) {
        this.element = element;
    }

    attached() {
      this.element.dispatchEvent(
          new CustomEvent('attached'));
    }
}

使用它就像任何其他事件绑定一样，除了它不冒泡，因此我们必须使用触发器而不是委托。

<div repeat.for="thing of things"
    attached.trigger="lookAndSeeWhatSizeThisThingIs($event, thing)" attachable>
    <img src="img/${$index}.png" />
</div>

在Aurelia中访问非viewModel的DOM元素和组合生命周期

1 个答案: